移动端部分兼容问题

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

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

　　（部分安卓手机的UC浏览器写完以后还是可以放大缩小）

 

2、三句代码合用达到清除HTML页面缓存效果

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

 

3、隐藏状态栏（针对iOS）

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

 

4、允许全屏浏览页面的标签（针对iOS） 

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

 

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

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

　　（iOS上会明显 有时候会把数字当成电话号码）

 

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

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

 

7、 添加到主屏后的标题（IOS）

<meta name="apple-mobile-web-app-title" content="标题"> 

 

8、启用 WebApp 全屏模式（IOS）

当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）

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

 

9、 百度禁止转码

通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：

<meta http-equiv="Cache-Control" content="no-siteapp" />

百度SiteApp转码声明

 

10、 设置状态栏的背景颜色（IOS）

设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable" content="yes" 时生效

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

content 参数：

1. default ：状态栏背景是白色。
2. black ：状态栏背景是黑色。
3. black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

11、 移动端手机号码识别（IOS）

在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

1. 7位数字，形如：1234567
2. 带括号及加号的数字，形如：(+86)123456789
3. 双连接线的数字，形如：00-00-00111
4. 11位数字，形如：13800138000

可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：

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

开启电话功能

<a href="tel:123456">123456</a>

开启短信功能：

<a href="sms:123456">123456</a> 

12、 移动端邮箱识别（Android）

与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的meta来管别邮箱的自动识别：

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

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a> 

 

13、 添加智能 App 广告条 Smart App Banner（IOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

 

14、viewport模板　

　<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">

 

15、webkit表单元素的默认外观怎么重置　

　.css{-webkit-appearance:none;} （ios上的下拉框会有圆角，所以要写border-radius:0）

 

16、在input框获得焦点时文字被清空用value 在input框输入文字时被清空用placeholder

　　webkit表单输入框placeholder的文字能换行么？ios可以，android不行~,在textarea标签下都可以换行~

html,body{

　　overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题，如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/

　　-webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上*/

　　position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话，会出现留白*/ 

　　}

17、手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象

.box{

　　display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

　　display: -moz-box; /* 老版本语法: Firefox (buggy) */

　　display: -ms-flexbox; /* 混合版本语法: IE 10 */

　　display: -webkit-flex; /* 新版本语法: Chrome 21+ */

　　display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

　　}

　　.box>li{

　　-webkit-box-flex: 1.0;

　　box-flex: 1.0;

　　-webkit-flex: 1.0;

　　flex: 1;

　　width: 0;/*解决兼容性问题*/

　　}

18、输入框的兼容性解决　　

input[type="text"],

　　input[type="date"],

　　input[type="tel"],

　　input[type="email"],

　　input[type="password"]{

　　-webkit-appearance: none;

　　display: block;

　　width: 100%;

　　height: 0.8rem;

　　line-height:normal;/*手机上的line-height不能写成和height的值一样，会出现再次输入光标靠上的现象*/

　　background: none;

　　font-size: 0.32rem;

　　padding-left: 0.28rem;

　　border-radius: 0;

　　-webkit-border-radius: 0;

　　border: 1px solid #d5d5d5;

　　-moz-box-sizing: border-box;

　　-webkit-box-sizing: border-box;

　　box-sizing: border-box;

　　outline: none;

　　-webkit-transform: translateZ(0);

　　-moz-transform: translateZ(0);

　　-ms-transform: translateZ(0);

　　-o-transform: translateZ(0);

　　transform: translateZ(0);/*解决加入js后input框输入瞬间变白的现象*/

　　}

 

19、禁用 radio 和 checkbox 默认样式　　

input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{

　　display: none;/*这样就可以用class自定义样式*/

　　}

 

20、webkit表单输入框placeholder的颜色值　　

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

 

21、手机上的多行省略　

　.overflow-hidden{

　　display: box !important;

　　display: -webkit-box !important;

　　overflow: hidden;

　　text-overflow: ellipsis;

　　-webkit-box-orient: vertical;

　　-webkit-line-clamp: 4;/*第几行出现省略号*/

　　/*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/

　　}

22、文本标签line-height：1或者是line-height等于height文字会被切掉

　　手机上浮动元素能写宽尽量写宽不然很容易出现兼容性问题,尽量不要写高，因为内容多少不固定

      给不同屏幕大小的手机设置特殊样式

　　@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}

 

23、<button></button>元素一定要写上type属性不然会默认提交表单，出现想不到的bug

 

24、某些安卓手机的自带浏览器不识别onkeydown onkeypress onkeyup事件，这些事件会导致不能输入汉字

 

25、input框若是不想输入文字 只能读不能写可以加readonly属性

 

26、手机上用背景图写运动

　　如果需要背景图定位来实现运动效果可以用rem进行计算后加上basckground-size:图的个数*100% 0；

　　 写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳

 

27、弹层的关闭事件

　　弹层的关闭事件容易触发弹层关闭后下一层的事件所以要给弹层关闭事件加上event.preventDefault()

　　弹层弹出后不允许屏幕滚动给弹层加mousemove事件event.preventDefault()

 

28、面包屑导航

　　面包屑导航如果按照bootstrap给li加：after伪元素的话在其他浏览器和在UC浏览器中表现的不一样，UC的的会比其他的浏览器宽，所占位置更多

　　如果一个手机看到的和其他手机不一样 会比其他的手机大或者小，查看他的浏览器字体设置是否正常，应该是他把手机浏览的字号调小或者调大了（坑人的所谓的bug）

　　IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的，那么就将该元素与别的元素同级

 

29、苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;