css（显示）
0viewport
<meta charset="utf-8">
<!--主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签，允许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签，iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的-->
<meta content="telephone=no" name="format-detection">
<!--禁止email识别-->
<meta content="email=no" name="format-detection">
1像素问题 移动端的像素有物理像素及逻辑像素的说法，同一个像素在不同的手机，显示的大小都不一致--initial-scale=1表示1倍的关系。user-scalabe=no，表示不允许用户更改当前页面的比例
2苹果8-不支持viewport-fit=cover
3苹果8-不支持iframe的高度继承，只能是由父组件传递参数到子页面中4苹果8-不支持flex格式，需要兼容
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items:center;
-webkit-align-items: center;
……
5ios端兼容input光标高度 问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上 当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。
解决办法：高度height和行高line-height内容用padding撑开
.content{
float: left;
box-sizing: border-box;
height: 88px;
width: calc(100% - 240px);
.content-input{
display: block;
box-sizing: border-box;
width: 100%;
color: #333333;
font-size: 28px;
//line-height: 88px;
padding-top: 20px;
padding-bottom: 20px;
}
}
6苹果8-不支持transform（跟flex一样）
-webkit-transform
7input 的placeholder属性会使文本位置偏上
line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法
8禁止用户选中 el { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
js（功能）
1苹果8-不支持=>
2苹果8-不支持let
3Object.assign() 兼容问题 引入polyfill 文件
4苹果8-模板字符串不支持
5键盘遮盖文本框 问题详情描述：安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子
解决办法：给input和textarea标签添加focus事件，如下，先判断是不是安卓手机下的操作，当然，可以不用判断机型，Document 对象属性和方法，setTimeout延时0.5秒，因为调用安卓键盘有一点迟钝，导致如果不延时处理的话，滚动就失效了.
changefocus(){
let u = navigator.userAgent, app = navigator.appVersion;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
if(isAndroid){
setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
document.activeElement.scrollIntoView();
}, 500);
}
},
*{
-webkit-overflow-scrolling: touch;
}
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
7IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才可以响应 可以用html5的oninput事件去代替keyup
8HTML5 audio autoplay 失效问题 这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。 解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。 document.addEventListener('touchstart',function() { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause();
});
9移动端点透问题 原因： touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。
尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。 用fastclick，github.com/ftlabs/fast… 用preventDefault阻止a标签的click 延迟一定的时间(300ms+)来处理事件 （不推荐）
10关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格 this.value = this.value.replace(/\u2006/g,'');
11移动端点击300ms延迟 原因：浏览器兴起初期，为了判断用户是双击还是单击，就设置了一个时间段300ms，用户单击后300ms后做事件处理，如果在300ms内连续点击，就判断为双击，做双击处理事件。 所以现在用click绑定事件呢，就会有300ms延迟的问题。 300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。 推荐两个js，一个是fastclick，一个是tap.js
12关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等) -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-size-adjust:100%;
