移动端常见的兼容性问题

1. meta 基础知识点如下

// 启动或禁用自动识别页面中的电话号码
<meta name="format-detection" content="telephone=no" />

// 启动或禁用自动识别邮箱地址
<meta name="format-detection"  content="email=no" /> 

// 设置 Web 应用是否以全屏模式运行。
<meta name="apple-mobile-web-app-capable" content="yes">

// ios 的 safari 顶端状态条的样式，可选的参数有：default、black、black-translucent
<meta name="apple-mobile-web-app-status-bar-style"  content="black" />

// winphone 系统 a、input 标签被点击时产生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight"  content="no"> 

2. input 基础知识点如下

// input 输入框不可编辑
<input type="text" name="name" value="xxx" disabled="true"/>
<input type="text" name="name" value="xxx" readonly="true"/>
/* disabled 文本框变灰，通过request.getParameter("name")得不到文本框中的内容
readonly 只是使文本框不能输入，样式没有变化，通过request.getParameter("name")可以得到内容 */

// ios 输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />

// android 上去掉语音输入按钮
input::-webkit-input-speech-button {
  display: none
}

// ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0;)
  -webkit-user-modify:read-write-plaintext-only;
} 
/* -webkit-user-modify 这个属性使用需谨慎，副作用就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米2
对于按钮类，不使用a或者input标签，直接用div标签 */

// 表单元素的默认外观重置
  -webkit-appearance:none;

// 修改表单输入框 placeholder 的颜色值
  input::-webkit-input-placeholder{color:#ccc;} 
  input:focus::-webkit-input-placeholder{color:#eee;} 
// 注意 placeholder,  ios 可以换行，android 不可以

// 禁用 select 默认下拉箭头
select::-ms-expand {display: none;} 

// 禁用 radio 和 checkbox 默认样式
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { 
  display: none; 
}

// 禁用 PC 端表单输入框默认清除按钮
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { 
  display: none; 
} 

3. 部分安装手机 a 标签用作按钮的时候，页面显示空白

解决办法：用 button 标签替换 a 标签

4. 微信禁止、选中文本

body {
  -webkit-user-select: none;
}

5. 禁止 ios 长按时不触发系统的菜单，禁止 ios&android 长按时下载图片

.css {
  -webkit-touch-callout: none
}

6. 移动端字体单位的选择 font-size 选择 px 还是rem

解决办法：

• 需要适配手机设备，使用 px 即可
• 需要适配各种移动设备，使用 rem，例如需要适配 iPhone 和iPad等分辨率差别比较挺大的设备，我们就选择 rem

7. 移动端 click 事件，使屏幕产生 200-300ms 的延迟响应

解决办法：

1. 使用 fastclick.js
2. zepto.js 里面的 tap 事件也可以解决 click 的延迟问题

8. 大屏幕中，图片有时候会变模糊

解决办法：用背景图片替换 img 标签，设计稿切出来的图片长宽保证为偶数，并使用 backgroud-size把图片缩小为原来的 1/2；

例如图片宽高为：100px*100px，那么 css 写法如下：

.css{
  background:url() no-repeat center center;
  background-size: 50px 50px;
  width:50px; 
  height:50px; 
}

9. 打电话&发短信&发邮件的如何实现

// 打电话
<a href="tel:0755-10086">打电话给:0755-10086</a> 
<a href="tel:4008106999,1034">400-810-6999 转 1034</a>
// 发短信
<a href="sms:10086">发短信给: 10086</a> 
// 发短信 短信内容 （本人进行测试，多个号码发送短信，功能实现不了，始终给第一个号码发送）
安卓手机：<a href="sms:10086?body=内容">发短信给: 10086</a> 
苹果手机：<a href="sms:10086&body=内容">发短信给: 10086</a> 
多个号码：<a href="sms:10086,10010&body=内容">发短信给: 10086和10010</a> 
         <a href="sms:10086,10010?body=内容">发短信给: 10086和10010</a> 
// 发邮件
<a href="mailto:peun@foxmail.com">单击这里给peun发电子邮件</a>
// 移动web页面自动探测电话号码：
<meta name="format-detection" content="telephone=yes">
// 使用wtai协议进行拨打电话：
<a href="wtai://wp//mc;15110418977">拨打XXX</a> 
<a href="wtai://wp/ap;15110418977;">将XXX存储至电话簿 </a>
// 在电话号码前加上 + （加号）表示国际号码:
<a href="wtai://wp/mc;+15110418977">+15110418977</a>
// 地图定位GPS：
<a href="geopoint:[经度],[纬度]">me位置</a> 比如：<a href="geopoint:200,20">me位置</a>

10. 屏幕旋转的事件和样式

// 1. 事件
window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；
// 代码判断
window.onorientationchange = function(){ 
  switch(window.orientation){ 
    case -90: 
    case 90: 
        alert("横屏:" + window.orientation); 
    case 0: 
    case 180: 
        alert("竖屏:" + window.orientation); 
    break; 
    } 
}

// 2. 样式
/*竖屏时使用的样式*/ 
@media all and (orientation:portrait) {
  .css{} 
}

/*横屏时使用的样式*/ 
@media all and (orientation:landscape) {
  .css{}
} 

11. H5 audio 和 video 在 ios 和 andriod 中无法自动播放

// 需要手动去触发事件来播放
$('.div').one('touchstart',function(){ 
  audio.play() 
}) 

12. 阻止用户调整微信浏览器字体大小

// ios 管事，android 暂无解决方案
body{
  -webkit-text-size-adjust: 100%!important;
} 

13. 解决 transition 闪屏

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

14. @-webkit-keyframes 注意

• 以0%开始100%结束，0%的百分号不能去掉
• after和before伪类无法使用动画

15. border-radius 注意

• 不支持%单位
• 三星 Galaxy S4中自带浏览器不支持 border-radius 缩写
• 同时写入 border-radius 和背景色的时候，背景色会溢出到圆角以外部分

16. active兼容处理 , 有时候伪类 :active 失效

// 1. body 添加 ontouchstart
<body ontouchstart="">

// 2. js 给 document 绑定 touchstart 或 touchend 事件
// css
a { color:#ccc;}
a:active{ color:#f0f;}

// html
<a herf=''>bar</a>

// js
document.addEventListener('touchstart', function(){}, false);

17. 视频，音频获取播放结束后的回调函数－ended

$('#video').on('ended',function(){
  alert(0);
});

18. ios 视频默认全屏播放，如何阻止全屏播放－ webkit-playsinline

<video id="video" src="" webkit-playsinline poster="" ></video>

18. 前端 iphonex 适配问题

目前有三种方法：
1. 机型适配
通过判断 navigator.userAgent 中的字符串 iphone 和 iphoneX 的设备宽和高
const isIphoneX = () => {
    return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}

2. 通过媒体查询，判断设备宽高和dpr
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
     background: red;
}
或者
@media only screen and (width: 375px) and (height: 690px){
    body {
        background: red;
    }
}

3. 通过 css3 的 content，设置 viewport-fit=cover
<meta name="viewport" content="initial-scale=1, viewport-fit=cover">
body {
         background: grey;
           padding-top: constant(safe-area-inset-top);
           padding-left: constant(safe-area-inset-left);
           padding-right: constant(safe-area-inset-right);
           padding-bottom: constant(safe-area-inset-bottom);
       }

为您推荐

http://www.open-open.com/lib/view/open1449325854077.html
https://mp.weixin.qq.com/s/JVUpsz9QHsNV0_7U-3HCMg