css3兼容各版本浏览器前缀（以及兼容移动端、PC端、iOS端与android端）

css3兼容各版本浏览器前缀

前缀    浏览器
-moz-    　　火狐等使用Mozilla浏览器引擎的浏览器
-webkit-   　 Safari, 谷歌浏览器等使用Webkit引擎的浏览器
-o-  　　　   Opera浏览器(早期)
-ms-  　　　 Internet Explorer (不一定)
 

1. h5底部输入框被键盘遮挡问题 

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

2.不让 Android 手机识别邮箱

3.禁止 iOS 识别长串数字为电话

4.禁止 iOS 弹出各种操作窗口

-webkit-touch-callout:none

5.消除 transition 闪屏

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

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

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

7.禁止ios和android用户选中文字

-webkit-user-select:none

8.fixed定位缺陷

• ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
• android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
• ios4下不支持position:fixed
• 解决方案： 可用iScroll插件解决这个问题

 

其他原创文章推荐：

• 如何把视频转换生成二维码，扫码直接播放？
• h5视频倍速播放功能(视频多倍速观看功能的实例)
• 手机屏幕画面实时直播
• 没有广告的视频一站式服务很适合放企业网站宣传片
• QQ浏览器劫持video标签加载自己的广告（怎么解决？）