移动端部分兼容问题

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

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

　　（部分安卓手机的UC浏览器写完之后仍是能够放大缩小）

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

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

 

九、 百度禁止转码

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

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

百度SiteApp转码声明

 

十、 设置状态栏的背景颜色（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 ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

十一、 移动端手机号码识别（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> 

十二、 移动端邮箱识别（Android）

与电话号码的识别同样，在安卓上会对符合邮箱格式的字符串进行识别，咱们能够经过以下的meta来管别邮箱的自动识别：

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

一样地，咱们也能够经过标签属性来开启长按邮箱地址弹出邮件发送的功能：

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

 

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

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

 

1四、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">

 

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

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

 

1六、在input框得到焦点时文字被清空用value 在input框输入文字时被清空用placeholder

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

html,body{

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

　　-webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的状况，因此须要写上*/

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

　　}

1七、手机上的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;/*解决兼容性问题*/

　　}

View Code

1八、输入框的兼容性解决　　

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框输入瞬间变白的现象*/

　　}

View Code

 

1九、禁用 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;}

 

2一、手机上的多行省略　

　.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*/

　　}

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

　　手机上浮动元素能写宽尽可能写宽否则很容易出现兼容性问题,尽可能不要写高，由于内容多少不固定

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

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

 

2三、<button></button>元素必定要写上type属性否则会默认提交表单，出现想不到的bug

 

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

 

2五、input框如果不想输入文字 只能读不能写能够加readonly属性

 

2六、手机上用背景图写运动

　　若是须要背景图定位来实现运动效果能够用rem进行计算后加上basckground-size:图的个数*100% 0；

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

 

2七、弹层的关闭事件

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

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

 

2八、面包屑导航

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

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

　　IOS手机中若是出现一个元素的层级很是高可仍是被别的元素遮盖的，那么就将该元素与别的元素同级

 

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