浏览器兼容性问题（移动设备和PC）

浏览器兼容性来自三个方面，即html，css和javaScript. 如下图所示:

移动设备上的网页有300毫秒的延迟，这通常会导致按钮单击延迟甚至单击失败. 这是由于区分点击事件和双击屏幕缩放的历史原因，

2007年，苹果发布了首款配备野生动物园的iphone IOS系统. 为了在手机侧在PC侧显示适合大屏幕的网页，使用了双击缩放（双击缩放）解决方案. 例如，如果您使用手机上的浏览器在PC上打开网页，则可能会看到虽然页面内容可以填满整个屏幕，但是字体和图片很小，但是您可以快速双击屏幕的一部分，您可以看到该部分的放大内容，并且再次双击后可以返回到原始状态.

双击缩放表示您用手指在屏幕上快速点击两次. iOS随附的Safari浏览器会将网页缩放到原始比例.

原因在于浏览器需要如何判断快速点击. 当用户单击屏幕上的元素（例如标签的跳转链接）时，浏览器将首先捕获该点击，但是浏览器无法确定用户是仅单击链接还是双击该部分. 区域进行缩放操作，因此在捕获到第一次单击后，浏览器将保留一段时间，如果用户在t的时间间隔内未进行下一次单击，则浏览器将执行单击跳转的处理链接. 如果用户在时间t中执行第二次单击操作，则浏览器将禁止跳转，而是对部分区域中的页面执行缩放操作. 那么这个时间间隔t是多少？在IOS Safari中，大约需要300毫秒. 这是延迟的根源. 用户仅单击页面后，页面会花一些时间来响应，从而给用户带来缓慢的体验. 对于Web开发人员而言，页面js捕获点击事件的回调函数需要300毫秒才能生效，这是间接导致处理会影响其他业务逻辑.

解决方案:

fastclick可以解决手机上click事件的300ms延迟. zepto的触摸模块，tap事件也是为了解决点击延迟的问题

触摸事件的响应顺序为touchstart-> touchmove-> touchend->

单击，您还可以通过绑定ontouchstart事件来加快对事件的响应，并解决300ms的延迟问题

完成将cursor: pointer添加到CSS的操作.

该问题在三星手机上发现，并且仅在特定需求下存在，因此，如果没有类似问题，则可以忽略. 第一个要求是浮动层操作. 掩盖在Samsung上的元素仍然可以聚焦，单击和更改. 有两种解决方案.

1. 显示该层后，将相应的类名添加到控件中，并截断了可以获取显示层下焦点元素的事件获取

2. 通过添加focusable元素的disabled属性，您还可以使用该属性加上dom lock（禁用的转换方法）

h5页的一个非常痛苦的问题是各种浏览器兼容问题，当输入框位于底部时，单击软键盘后将阻止输入框. 可以解决以下问题:

var oHeight = $(document).height(); //浏览器当前的高度
   
   $(window).resize(function(){
 
        if($(document).height() < oHeight){
         
        $("#footer").css("position","static");
    }else{
         
        $("#footer").css("position","absolute");
    }
        
   });

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

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

webkit-touch-callout:none

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

可以通过正则去掉      this.value = this.value.replace(/\u2006/g, '');

webkit-user-select:none

$('html').one('touchstart',function(){
    audio.play()
})

<input autocapitalize="off" autocorrect="off" />

<input::-webkit-input-speech-button {display: none}>

解决方案:

1.尽可能地使用合成属性transform和opacity来设计CSS3，不使用position的left和top来定位
2.开启硬件加速
  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

ios下的fixed元素很容易定位错误. 弹出软键盘时，会影响固定元素的位置

Android下的固定性能优于iOS. 弹出软键盘时，不会影响固定元素的位置

位置: ios4下不支持固定

解决方案: iScroll插件可用于解决此问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

输入的占位符的文本位置在上侧: PC侧的行高等于要对齐的高度，而移动侧仍在上侧各种浏览器兼容问题，解决方案是设置行高: 正常

单击浏览器后，有时js不会自动执行，尤其是在mobilesafari中. 这与往返缓存（bfcache）有关.

解决方案: window.onunload = function（）{};

在iOS6浏览器中，CSS3中的calc变量必须以-webkit-为前缀. 当前，FF浏览器不需要-moz-前缀.

Android浏览器当前不支持calc，因此应在以下位置添加一个保守的大小:

div { 
    width: 95%; 
    width: -webkit-calc(100% - 50px); 
    width: calc(100% - 50px); 
}

a标记以外的其他元素无效；它们在Android下有效. 相似:

div#topFloatBar_l: hover #topFloatBar_menu {display: block; }

这种导航在iOS6点击中没有显示点击效果，并且您只能通过添加点击侦听器来增加或减少元素的类来控制子元素.

添加CSS3属性后，关联元素的事件监视将无效，这等效于使元素“可见，而不是指向”. IE仅在11之前受支持，并且基本上支持其他浏览器的当前版本.

指针事件: 无；

zepto的轻敲通过侦听绑定到文档的触摸事件来完成轻敲事件的模拟，而轻敲事件是通过在文档上冒泡而触发的. 单击完成后的轻击事件（touchstart \ touchend）需要将其冒泡到文档上以进行触发，并且在冒泡到文档之前，用户的手触摸屏幕（touchstart）并离开屏幕（touchend）的触摸事件）将触发click事件，因为click事件具有延迟的触发（这就是为什么mobile使用tap而不是click的原因）（大约300毫秒，以实现safari双击事件的设计），因此点击事件被执行，弹出选择组件被立即隐藏，而点击事件仍然被延迟. 在300ms中，当300ms到达时，单击的元素未完成而是被隐藏. 它下面的元素被隐藏. 如果正下方的元素绑定到click事件，则此时将触发它. 如果没有绑定单击事件，则当没有单击但仅在下面是输入输入框（或选择选择框或单个复选框）时，单击默认焦点并弹出输入键盘，并且出现上述现象出现.

引入fastclick.js，在页面中加入如下js代码
1 window.addEventListener( "load", function() {
2     FastClick.attach( document.body );
3 }, false );
或者有zepto或者jQuery的js里面加上
1 $(function() {
2     FastClick.attach(document.body);
3 });
当然require的话就这样：
1 var FastClick = require('fastclick');
2 FastClick.attach(document.body, options);
方案二：用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()
1 $("#cbFinish").on("touchend", function (event) {
2     //很多处理比如隐藏什么的
3     event.preventDefault();
4 });
方案三：延迟一定的时间(300ms+)来处理事件
1 $("#cbFinish").on("tap", function (event) {
2     setTimeout(function(){
3     //很多处理比如隐藏什么的
4     },320);
5 });

解决方案:img{border:none;}

解决方案:可以用 opacity
eg:opacity:0.7;/*FF chrome safari opera*/ 
filter:alpha(opacity:70);/*用了ie滤镜,可以兼容ie*/
但是,需要注意的是,opacity会影响里面元素的透明度

解决方案:
1.display:inline-block;
2.*display:inline;

解决方案:用css给body添加magin属性为0px
body{margin:0;}

解决方案:

方法1:

div.content { 
　　width:400px;  //这个是错误的width(对于ie5来说是正确的），所有浏览器都读到了 
　　voice-family: "\"}\"";  //IE5.X/win忽略了"\"}\""后的内容 
　　voice-family:inherit; 
　　width:300px;  //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的 
}　

方法2:

div.content { 
　　width:300px !important;  //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值 
　　width(空格)/**/:400px;  //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用 
}

解决方案:overflow设置为hidden

解决方案:min-height:200px; height:auto !important; height:200px; overflow:visible;

解决方案; IE6唯一识别属性_的方式加_display属性_display:inline;

解决方案:cursor:url(Hand.cur), url(/Hand.cur), auto;

解决方案:可以删除之间的回车键也可以让这些图片浮动

::-ms-clear,::-ms-reveal{display:none;}
　　注:IE9-不识别

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-261754-1.html