移动端兼容性问题

① 安卓浏览器看背景图片，有些设备会模糊，原因是手机的分辨率太小

解决方案： 用2X图片来代替img标签，然后background-size: contain

② 防止手机中页面放大或缩小： 在meta中设置viewport user-scalable = no

③ 上下拉滚动条卡顿： overflow-scrolling: touch;

④ 禁止复制选中文本： user-select: none;

⑤ 长时间按住页面出现闪退：-webkit-touch-callout: none;

⑥ 动画定义3D硬件加速： transform: translate 3d(0,0,0);

⑦ formate-detection 启动或禁止自动识别页面中的电话号码，content = "yes/no"

⑧ a标签添加tel是拨号功能

⑨ 安卓手机的圆角失效： background-clip: padding-box;

⑩ 手机端300ms延迟： fastclick

① 横平时字体加粗不一致： text-size-adjust: 100%;

一. css部分

1. body如果设置height:100%;overflow:hidden是依然可以滑动的，如果需禁止，要再加一层div设置 height:100%加overflow：hidden（html,body加height:100%） ，这样元素超出body的高度也不能滑动了。
   或者同时给html，body加height:100%;overflow:hidden

2. meta标签 

   <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面 做了缩小优化，所以字体等都相应缩小了（980px是相对于手机像素的，我的是超过1000px多一些就出现滚动条了，这个没具体研究）。
   
   关于  initial-scale=1 ，这个参照iphone5的尺寸320*568，如果你页面按照640*1136做的话，scale就设为0.5                     

   <meta content="yes" name="apple-mobile-web-app-capable">   IOS中safari允许全屏浏览 
   
   <meta content="black" name="apple-mobile-web-app-status-bar-style">  IOS中Safari顶端状态条样式
   
   <meta content="telephone=no" name="format-detection">  忽略将数字变为电话号码

   <meta content="email=no" name="format-detection">   忽略识别email

3. 做全屏显示的图片时，一般为了兼容大部分的手机，图片尺寸一般设为640*960（我是觉得这个尺寸好，也看不少的图片也是这个尺寸，视情况而定）

4. 去除webkit的滚动条 

   element::-webkit-scrollbar{

          display: none;

   }

5. 去除button在ios上的默认样式

   -webkit-appearance: none;

   border-radius: 0 

6. 不想让按钮touch时有蓝色的边框     -webkit-tap-highlight-color:rgba(0,0,0,0);

7. 如果要用到fixed譬如导航等，可以用absolute达到一样的效果，把body设为100%；将元素absolute到body上即可，不过这样不能让body滚动，如果需要有滚动的地方，就放在div中滚动

8. 在移动端做动画效果的话，如果通过改变绝对定位的top，或者margin的话做出来的效果很差，很不流畅，而使用css3的transition或者animation的效果将会非常棒（这一方面IOS比android又要好不少）。
   如果用translate3d来实现动画，会开启GPU加速，硬件配置差的安卓用起来会耗性能，需慎用（借用1楼评论的）

9. 使用图片时，会发现图片下总是有大概4px的空白，（原因据说图片是inline，触发baseline什么的。。。）常用解决方法有

   img{display:block}；

   img{vertical-align:top}也可取其他几个值，视情况而定

   其他解决办法  见此

10. 学会使用display:-webkit-box的布局，能很好地帮我们做到页面自适应，譬如 导航栏 这些个人觉得特别适合，具体使用方法此处不叙述

11. 使用 a 标签的话，尽量让 a 标签 block ，尽量让用户可点击区域最大化

12. 两个页面使用了transform之后，页面下的z-index有时就会失效，我遇到过，但没去认真探究，只是把z-index提高就好了，如果遇到这个问题的，详细可以   看这

13. 在iOS中，当你点击比如 input 准备输入时，虚拟键盘弹出，整个视窗的 高度 就会变为 减去键盘 的高度，加入你在底部有fixed的元素比如btn，这个元素就会跑上来，一般都不会太美观。我是当focus时就把它设为absolute，视情况而定

14. 禁止用户选中文字   -webkit-user-select:none

15. 当你把input设为 width:100%时，有时可能会遇到input的宽度超出了屏幕，这时可对input加一个属性 box-sizing:border-box

    关于box-sizing:border-box，此属性是把边框的高宽包含在盒子的高宽中，假如你设置两个元素float且各占50%，又都有border时，用这个属性就可以完美地让它们能显示在同一行

16. 要table的td用col设置了宽度后超出部分隐藏的话给table加属性table-layout:fixed（固定宽度布局）

17. 如果想改变 placeholder  里的样式，需要用css伪类。    如  ::-webkit-input-placeholder{color:#ccc}

18. 做一个方向箭头比如  “>” 时，可以用一个正方形的div，设置border:1px 1px 0 0；然后rotate(45deg)

19. CSS权重：style是1000，id是100，class是10，普通如li、div和伪类是1，通用如*是0；

20. 使用rem时，设某个div比如的height:3rem;line-height:1.5rem;overflow:hidden;时，在某些android手机上可能会出现显示不止两行,第三行会显示点头部。 解决：利用js获取文字line-height再去设置div高度

二. JS部分

1. 如果使用jquery绑定touch事件的话，获取touchstart，touchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX，获取touchend则用 e.originalEvent.changedTouches[0].pageX

2. 利用style获取获取transform的rotate值

   parseInt(/rotateX\((.*?)\)/.exec(getALL.style.webkitTransform)[1])

   如果页面一开始没有style值，rotate是写在CSS里的，需要用到getComputedStyle，具体请看这里。

3. 有些版本的iphone4中， audio和video默认播放事件不会触发，比如使用window.onload或计时器等都不能触发播放，必须用JS写事件让用户手动点击触发才会开始播放

4. 想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault()就会 e 报错，处理方法为

   touchmove:function(e,参数一){
   　　var e=arguments[0]
         e.preventDefault()
   }

5. HTML5的新js API有新的选择器，比如querySelector(".class #id")和querySelectorAll(".class  element")。

6. 点击一个元素时，使用touchstart会立即触发，而使用click则用有大概0.3s的延迟

7. 用e.preventDefault()会阻止的scroll，click等事件

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

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

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

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

<meta name="format-detection" content="telephone=no" />（ios上会明显 有时候会把数字当成电话号码）

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

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

viewport模板

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">//主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。

<meta content="yes" name="apple-mobile-web-app-capable">//这个也是iphone私有标签，允许全屏浏览。

<meta content="black" name="apple-mobile-web-app-status-bar-style">//iphone的私有标签，iphone顶端状态条的样式。

<meta content="telephone=no" name="format-detection">//禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。

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

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

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

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

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

html,body{

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

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

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

}

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

}

输入框的兼容性解决

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

}

禁用 radio 和 checkbox 默认样式

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

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

}

webkit表单输入框placeholder的颜色值

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

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

手机上的多行省略

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

移动端兼容性问题

原文：https://www.cnblogs.com/leftJS/p/11097387.html