移动端页面兼容性问题解决方案整理

1、浏览器

【UC浏览器】video标签脱离文档流

场景：<video>标签的父元素(祖辈元素)设置transform样式后，<video>标签会脱离文档流。

测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zj3xiyu

解决方案：不使用transform属性。translate用top、margin等属性替代。

 

【UC浏览器】video标签总在最前

场景：<video>标签老是在最前（能够理解为video标签的z-index属性是Max）。

测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。

 

【UC浏览器】position:fixed 属性在UC浏览器的奇葩现象

场景：设置了position: fixed 的元素会遮挡z-index值更高的同辈元素。

　　　在8.6的版本,这个状况直接出现。

　　　在8.7以后的版本,当同辈元素的height大于713这个「神奇」的数值时,才会被遮挡。

测试环境：UC浏览器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。

Demo：http://t.cn/zYLTSg6

 

【QQ手机浏览器】不支持HttpOnly

场景：带有HttpOnly属性的Cookie，在QQ手机浏览器版本从4.0开始失效。JavaScript能够直接读取设置了HttpOnly的Cookie值。

测试环境：QQ手机浏览器 4.0/4.1/4.2 + Android 4.0 。

 

【MIUI原生浏览器】浏览器地址栏hash不改变

场景：location.hash 被赋值后，地址栏的地址不会改变。

　　　但实际上 location.href 已经更新了，经过JavaScript能够顺利获取到更新后的地址。

　　　虽然不影响正常访问，但用户没法将访问过程当中改变hash后的地址存为书签。

测试环境：MIUI 4.0

 

【Chrome Mobile】fixed元素没法点击

 场景：父元素设置position: fixed;

　　　子元素设置position: absolute;

　　　此时，若是父元素/子元素还设置了overflow: hidden 则出现“父元素遮挡该子元素“的bug。

　　　视觉(view)层并无出现遮挡，只是没法触发绑定在该子元素上的事件。可理解为：「看到点不到」。

补充： 页面往下滚动，触发position: fixed;的特性时，才会出现这个bug，在最顶不会出现。

测试平台： 小米1S，Android4.0的Chrome18

demo： http://maplejan.sinaapp.com/demo/fixed_chromemobile.html

解决办法： 把父元素和子元素的overflow: hidden去掉。

 

2、 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等事件

四. 微信部分

2. 判断是否来自微信浏览器

   function isFromWeiXin() {
       var ua = navigator.userAgent.toLowerCase();
       if (ua.match(/MicroMessenger/i) == "micromessenger") {
           return true;
       }
       return false;
   }

3. 判断手机的类型

   var user="";
           if (/android/i.test(navigator.userAgent)){
   　　      //  android
               user="1";
           }
           if (/ipad|iphone|mac/i.test(navigator.userAgent)){
               //  ios
               user="0";
           }

4. 微信浏览器里均不能打开下载的连接，需在浏览器打开

5. 若是在网页里嵌套一个iframe，src为其余的网址等，当在微信浏览器打开时，若是irame里的页面过大，则iframe的src不能加载（具体多大不知道，只是遇到过）

6. 微信升级到6.0后，在微信网页里须要用到设置分享的标题等，须要用到JSSDK，同时去微信公众平台里绑定里放置网页的域名。不过JSSDK也不是全部问题都解决了，在android里点击分享到朋友圈时就触发了分享成功的回调函数，即便取消分享也已经触发了成功的函数（如今不知道是否有修复，若是遇到了这类问题，应该就是这个缘由）