移动端常见兼容性问题

1.border-radius百分比失效
plaintext
1
解决方法：设置一个较大值比如 border-radius:9999px;
placeholder属性设置的文字向上偏移的厉害
plaintext
1
解决办法：line-height:normal
如果一个应用了css3 transform的元素里面包含fixed定位的元素，在webkit核心的浏览器下，该fixed定位的元素会失效，其实际定位效果类似绝对定位，会跟着滚动条的滚动而滚动！
plaintext
1
避免在应用了css3 transform的元素内部嵌套fixed定位的元素。
webkit上的input,button,及select的默认样式可以通过以下代码禁用，然后自定义。
plaintext
1
-webkit-appearance:none;
video标签的父元素(祖辈元素)设置transform样式后，标签会脱离文档流
plaintext
1
避免使用transform，如果需要设置位移，可使用绝对定位加top/left代替
webkit上的input,button,及select的默认样式可以通过以下代码禁用，然后自定义。
plaintext
1
-webkit-appearance:none;
body设置100%高度后，在移动浏览器里面可能会被底部的导航栏挡住:
plaintext
1
document.documentElement.style.height = window.innerHeight + 'px'
字体设置建议：
plaintext
1
2
3
body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
移动端边框1像素的问题
plaintext
1
2
3
4
5
解决方法：
1.border-image 设置
2.使用媒体查询，定义不同像素下的边线宽度  用 transform:scaleY() 来设置
3.利用伪类来实现
4.定死viewport 通过JS 来控制rem  来实现
设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为
plaintext
1
2
3
4
5
6
7
a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}
安卓浏览器看背景图片，有些设备会模糊
plaintext
1
2
原因：因为devicePixelRatio，手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480*320，这样devicePixelRatio＝2。
解决方法： 设置2x的背景图片 然后利用background-size：contain
防止手机中网页放大和缩小
plaintext
1
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
apple-mobile-web-app-capable
plaintext
1
2
3
4
apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。
写法：<meta name="apple-mobile-web-app-capable" content="yes">

content 默认为no
format-detection 页面上数字不被识别为电话
plaintext
1
2
3
4
5
format-detection 启动或禁用自动识别页面中的电话号码。
写法：
<meta name="format-detection" content="telephone=no" >

content 可以设置 启动或禁止
禁止复制、选中文本
plaintext
1
user-select:none；
Retina屏的1px边框
plaintext
1
border-width:thin;
某些Android手机圆角失效
plaintext
1
background-clip: padding-box;
IOS中input键盘事件keyup、keydown、keypress支持不是很好
plaintext
1
通过html5 的 oninput 来代替
解决 ios 设置input 按钮样式会被默认样式覆盖
plaintext
1
2
border: 0; 
-webkit-appearance: none;
解决 IOS键盘字母输入，默认首字母大写
plaintext
1
<input type="text" autocapitalize="off"/>
设置 select 下拉选择设置右对齐
plaintext
1
direction: rtl;
解决 通过transform进行skew变形，rotate旋转会造成出现锯齿现象
plaintext
1
2
3
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
 transform: rotate(-4deg) skew(10deg) translateZ(0);
 outline: 1px solid rgba(255,255,255,0)
移动端点击300ms延迟
plaintext
1
2
3
4
5
6
7
8
9
10
产生原因：
苹果发明，为了让浏览器明白用户是点击 还是双击缩放而诞生

1.禁用浏览器的缩放功能
    <meta name="viewport" content="user-scalable=no">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1">
2.更改默认的视口宽度，当网页为响应式的时候设置。因为已经做过响应式或者自适应所以缩放就没有必要了。也就去掉点击延时的必要
    <meta name="viewport" content="width=device-width">
3.使用touchend 事件处理
4.使用第三方封装js 如tap.js
移动端滚动穿透问题
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
问题：
移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动，这个叫 “滚动穿透”

解决方案：
1.在弹出层的touchmove事件中调用preventDefault
2.body 设置 overflow：hidden （适合PC）
3.css设置
    position: fixed;
    width: 100%;
  js设置
    (function(){
       var scrollTop = 0;
       // 显示弹出层
       open.onclick = function(){
          // 在弹出层显示之前，记录当前的滚动位置
          scrollTop = getScrollTop();
          // 使body脱离文档流
          document.body.classList.add('dialog-open'); 
          // 把脱离文档流的body拉上去！否则页面会回到顶部！
          document.body.style.top = -scrollTop + 'px';
          mask.style.display = 'block';
       }  
       // 隐藏弹出层
       close.onclick = function(){
         mask.style.display = 'none';
         // body又回到了文档流中（我胡汉三又回来啦！）
         document.body.classList.remove('dialog-open');
         // 滚回到老地方
         to(scrollTop);
       }
       function to(scrollTop){
         document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
       }
       function getScrollTop(){
         return document.body.scrollTop || document.documentElement.scrollTop;
       }
     }()); 
    function fixedBody(){
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        document.body.style.cssText += 'position:fixed;top:-'+scrollTop+'px;';
    }
    
    function looseBody() {
        var body = document.body;
        body.style.position = '';
        var top = body.style.top;
        document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
        body.style.top = '';
    }
移动端点击穿透问题
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
问题描述：
如果在移动页面有两个元素 A BA 在 B 之上。 如果A监听touch事件(zepto的tap事件)，而且B上有个链接(或者监听click事件)，那么当touch A后，先后触发了touchStart和touchEnd事件，touchEnd后A层隐藏，而此刻会触发在document最前面B的click事件；这就是点透行为。

原理：在移动端 事件执行的顺序是touchstart > touchend > click  

解决方法：
1.尽量使用touch事件代替click事件
2.用preventDefault阻止a标签的click
3.延迟一定的时间(300ms+)来处理事件 （不推荐）

$("#haorooms").on("touchend",function(event) {
   event.preventDefault();
 })
解决 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格
plaintext
1
this.value = this.value.replace(/\u2006/g,'');
移动端 HTML5 audio autoplay 失效问题
plaintext
1
2
3
4
5
6
7
8
9
10
11
问题原因：
因为网页中自动播放视频或者音频会给用户带来麻烦护着流量消耗，所以安卓和IOS 都默认禁用了自动播放

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

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

移动端 HTML5 input date 不支持 placeholder 问题
plaintext
1
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">
移动端呼起键盘引起的问题
plaintext
1
2
3
4
5
6
7
8
9
1.当某输入框获取焦点时，弹起自定义时间插件，貌似很简单一个功能，但测试时问题来了，获取焦点时键盘也会跟着一起弹出来
解决方法：
   通过js解决 focus 的时候  让她 blur
2.input填写时 键盘呼起，页面底部设置为fixed 的也会被顶起。
解决方法：
   1.呼起键盘的时候 将fixed 项目隐藏，键盘隐藏时在将fixed显示
   2.监听页面滚动 将其隐藏显示


transform 属性会使 position：fixed 失效
plaintext
1
解决办法： 把内容和定位的元素分开；
rem 单位下做圆 宽高比较小的时候在移动端会变成椭圆形
plaintext
1
2
原因：宽高大小有小数    
解决方法：做取整处理
苹果手机在点击时候会自带一个灰亮背景
plaintext
1
解决办法： -webkit-tap-highlight-color: transparent;
afari 浏览器 input submit 在会出现颜色和样式改变的bug
plaintext
1
解决办法： input 写上-webkit-appearance: none;