移动端Web资源整合

meta基础知识

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- ios7.0版本以后，safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- 可选default、black、black-translucent -->

viewport模板——通用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta content="email=no" name="format-detection">

<title>标题</title>

<link rel="stylesheet" href="index.css">

</head>

<body>

这里开始内容

</body>

</html>

viewport模板 – target-densitydpi=device-dpi，android 2.3.5以下版本不支持

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 -->

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta content="email=no" name="format-detection">

<title>标题</title>

<link rel="stylesheet" href="index.css">

</head>

<body>

这里开始内容

</body>

</html>

常见问题

部分android系统中元素被点击时产生的边框怎么去掉

android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

a,button,input,textarea{

-webkit-tap-highlight-color: rgba(0,0,0,0;)

-webkit-user-modify:read-write-plaintext-only;

}

winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
```
<meta name="msapplication-tap-highlight" content="no">
```
webkit表单元素的默认外观怎么重置
```
.css{-webkit-appearance:none;}
```

webkit表单输入框placeholder的颜色值能改变么

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

禁用 radio 和 checkbox 默认样式

input[type=radio]::-ms-check,

input[type=checkbox]::-ms-check

{

display: none;

}

禁用PC端表单输入框默认清除按钮

input[type=text]::-ms-clear,

input[type=tel]::-ms-clear,

input[type=number]::-ms-clear

{

display: none;

}

禁止ios和android用户选中文字
```
.css{-webkit-user-select:none}
```

打电话发短信实现

<a href="tel:0755-10086">打电话给:0755-10086</a>

<a href="sms:10086">发短信给: 10086</a>

写邮件实现

<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>

屏幕旋转的事件和样式

事件

window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

window.onorientationchange = function(){

switch(window.orientation){

case -90:

case 90:

alert("横屏:" + window.orientation);

case 0:

case 180:

alert("竖屏:" + window.orientation);

break;

}

}

样式

//竖屏时使用的样式

@media all and (orientation:portrait) {

.css{}

}

//横屏时使用的样式

@media all and (orientation:landscape) {

.css{}

}

audio元素和video元素在ios和andriod中无法自动播放
```
$('html').one('touchstart',function(){

audio.play()

})
```
ios使用-webkit-text-size-adjust禁止调整字体大小
```
body{-webkit-text-size-adjust: 100%!important;}
```
取消input在ios下，输入的时候英文首字母的默认大写
```
<input autocapitalize="off" autocorrect="off" />
```

android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

播放视频不全屏

<!--

1.ios7+支持自动播放

2.支持Airplay的设备（如：音箱、Apple TV)播放

x-webkit-airplay="true"

3.播放视频不全屏

webkit-playsinline="true"

-->

<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

移动端Web资源整合的更多相关文章

【超级干货】手机移动端WEB资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
手机移动端WEB资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
【超级干货】手机移动端WEB资源整合：转载
转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽 ...
web前端-《手机移动端WEB资源整合》——meta标签篇
前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...
手机H5移动端WEB资源整合之meta标签
一.相关网站使用meta的实例 youku首页的Meta设置: <meta charset="utf-8"> <meta http-equiv="X-U ...
【原】移动web资源整理(安卓、ios移动端兼容性问题归整)
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wi ...
WebJars——web端静态资源的jar包
1.WebJars介绍 Web前端使用了越来越多的JS或CSS,如jQuery,Backbone.js和Bootstrap.一般情况下,我们是将这些Web资源拷贝到Java Web项目的webapp相 ...
移动端web开发尽量哪些标签常用标签及注意事项
H5手机移动端WEB开发资源整合常用的标签及注意事项: https://blog.csdn.net/u012118993/article/details/56023399 移动前端不得不了解的htm ...
移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

随机推荐

Failed while installing Dynamic Web Module 3.0
1.错误描述 2.错误原因 Java Web项目不满足Web Module 3.0,需要降低Web Module版本 3.解决办法 (1)降低Web Module版本为2.5 (2)修改jdk版本,升 ...
IOS开发之XCode学习009：UIViewController使用
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 通过点击屏幕事件,调用ViewController ...
freemarker中的if...elseif...else语句（七）
freemarker中的if...elseif...else语句 1.设计示例 <#if student.studentAge lt 12> ${student.studentName}不 ...
JAVA几种缓存技术介绍说明
OSCache OSCache是个一个广泛采用的高性能的J2EE缓存框架,OSCache能用于任何Java应用程序的普通的缓存解决方案. OSCache有以下特点: 我创建了一个群,群里不定期分享技术 ...
吐血整理：人工智能PDF中文教材资源包2.73G基本包含全部学习资料-人工智能学习书单
吐血整理:人工智能PDF中文教材资源包2.73G基本包含全部学习资料人工智能学习书单(关注微信公众号:aibbtcom获取更多资源) 文末附百度网盘下载地址人工神经网络与盲信号处理人工神经网络与 ...
springmvc后台取值中文乱码问题
字符-->字节.字节-->字符时需要用到编码(Encoder).解码(Decoder) 几种编码: ASCII:总共128 ISO-8859-1:涵盖大部分西欧语言字符.一个字符一个字节表 ...
Codeforces Round #466 (Div. 2) 题解
人生中第三次$CF$... 考试中切了$A$~$E$ $F$题会做没时间写题解 A:Points on the line 题意给定一个数列,删最小的数,使最大差不大于一个定值 So ...
HDU4812
树分治求逆元请递推,不然会TLE 开桶记录即可注意常数 # pragma comment(linker,"/STACK:102400000,102400000") # incl ...
C++学习-6
1.Auto无法区分常量变量,引用常量(顶层const被忽略了),不能识别引用变量,const和&都无法识别 Auto不能放在结构体内部 2.decltype()能识别引用,能获取常量属性,t ...
10.socket网络编程
套接字工作流程先从服务器端说起.服务器端先初始化Socket,然后与端口绑定(bind),对端口进行监听(listen),调用accept阻塞,等待客户端连接.在这时如果有个客户端初始化一个Sock ...

移动端Web资源整合

移动端Web资源整合的更多相关文章

随机推荐

热门专题