移动端兼容问题

disabled样式覆盖问题

IOS 移动端 input设置了readonly后仍然能被聚焦，后更改为disabled.
延伸了一个新问题,禁用状态下字体颜色设置无效

      
      
       
       input[disabled],
      
      
      
      
       
       input:disabled,
      
      
      
      
       
       input[disabled="disabled"] {
      
      
      
      
       
          color: #000 !important; 
      
      
      
      
       
          background: #fff !important;
      
      
      
      
       
       }
      
      
      
      
       
       // 样式设置没有起作用
      
      
      
      
       
       // 正确样式设置 
      
      
      
      
       
       input[disabled], 
      
      
      
      
       
       textarea[disabled],
      
      
      
      
       
       select[disabled='disabled']{
      
      
      
      
       
          -webkit-text-fill-color: rgba(0, 0, 0, 1);   // 用于改变字体color
      
      
      
      
       
          opacity: 1;    // 浏览器默认为0.3，所以得改为1
      
      
      
      
       
          color: rgba(0, 0, 0, 1); 
      
      
      
      
       
          background: white;
      
      
      
      
       
       }

300ms点击延迟

300ms点击延迟，用FastClick.js
扩展：FastClick.js实现原理，在document上绑定touchstart,touchstart,记录当前信息，阻止默认行为，创建一个自定义鼠标事件对象(type: click)，并触发该事事件，执行click的回调函数。

1px的边框处理

1px的边框处理，在最小dpr为2的情况下，缩放0.5倍

Web移动端Fixed布局的解决方案

iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。但是 fixed 元素在有软键盘唤起的情况下， fixed 定位好的元素跟随页面滚动了起来。(参考另一篇文章)
Web移动端Fixed布局的解决方案

input有placeholder情况下不要设置行高，否则会偏上。

input有placeholder情况下不要设置行高，否则会偏上

伪类 :active 生效

要CSS伪类:active生效，只需要给 document 绑定touchstart或touchend事件.

      
      
       
       <style>
      
      
      
      
       
       a {
      
      
      
      
       
         color: #000;
      
      
      
      
       
       }
      
      
      
      
       
       a:active {
      
      
      
      
       
         color: #fff;
      
      
      
      
       
       }
      
      
      
      
       
       </style>
      
      
      
      
       
       <a herf=foo >bar</a>
      
      
      
      
       
       <script>
      
      
      
      
       
         document.addEventListener('touchstart',function(){},false);
      
      
      
      
       
       </script>

###消除 transition 闪屏
两个方法

移动端兼容问题大专栏 tr>

      
      
       
       -webkit-transform-style: preserve-3d;
      
      
      
      
       
       /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
      
      
      
      
       
       -webkit-backface-visibility: hidden;
      
      
      
      
       
       /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

扩展：如何启用GPU硬件加速
如，overflow-scrolling,will-change，transform

iOS浏览器横竖屏会出现字体加粗不一致

因此最佳方案是将text-size-adjust 为 100% 。

      
      
       
       -webkit-text-size-adjust: 100%;
      
      
      
      
       
       -ms-text-size-adjust: 100%;
      
      
      
      
       
       text-size-adjust: 100%;

iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

可以通过正则去掉

1	this.value = this.value.replace(/u2006/g, '');

移动端 HTML5 audio autoplay 失效问题

解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

      
      
       
       document.addEventListener('touchstart', function () {
      
      
      
      
       
           document.getElementsByTagName('audio')[0].play();
      
      
      
      
       
           document.getElementsByTagName('audio')[0].pause();
      
      
      
      
       
       });

IOS Safari 支持localstorage但是setItem异常

出现条件

1 2	平台：IOS8.1 browser：Safari600.1.4

问题源自于项目需要在浏览器中遮罩提示,点击关闭状态存储在localstorage中。Safari浏览器关闭后刷新页面层依旧存在 bug issue 简单的存储状态可以使用cookie的方式替代。

Chrome 地址栏自动隐藏交互行为对于fixed 顶部的元素遮挡

页面包含fixed顶部的tip element，当页面向下滑动的时候Chrome地址栏自动隐藏，当向上滑动的时候地址栏自动出现。这种交互行为本身的好处会增大用户可视、交互区域。但是在Chrome 26这个版本这个浏览器UI布局使用adjustPan的方式，以至于向上滑动以后fixed的元素没有被自动向下移动（没有重绘）。

      
      
       
       .header {
      
      
      
      
       
         -webkit-transform: translateZ(0)
      
      
      
      
       
       }

###Android平台遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)
问题发现于三星手机，这个在特定需求下才会有，因此如果没有类似问题的可以不看。首先需求是浮层操作，在三星上被遮罩的元素依然可以获取focus、click、change.在查看bug报告list以后，找到了两种解决方案，第一是通过层显示以后加入对应的class名控制，第二是通过将可获取焦点元素加入的disabled属性，也可以利用属性加dom锁定的方式（disabled的一种变换方式）