移动web前端开发小结

注意：Chrome模拟手机的显示的界面是有误差的，强烈建议一定要在真机测试自己的移动端页面（以移动端页面为准）。

Android组件：WebView兼容问题

WebView存在跨域问题，需要在WebView配置。

1.页面高度渲染错误，页面的高度是否包含了导航，（华为手机就是偏偏有底部菜单）

设置窗口高度document.documentElement.style.height = window.innerHeight + 'px'; 

2.移动端背景图缩放固定。

采用fixed布局，zoom属性为1。

3.文本行高偏上不对齐。

设置line-height设置成normal。不要写死行高值。

4.文件上传无法唤醒文件。

部分手机无法兼容input file中accept等属性。移除即可。

5.移动端webview页面后退方法不生效。

window.history.pushState('forward', null, '#'); 
window.history.forward(1);
window.onpopstate = function(event) { 
        console.log(‘goBack’);
};  

PS: 适用于所有移动端上webview（微信，APP内嵌浏览器）。

IOS组件：WKWebView和UIWebView兼容问题

WKWebView不支持跨域，UIWebViw支持跨域。

PS：IOS会限制自定义请求头，建议采用cookie字段请求携带token或者后端设置Access-Control-Allow-Headers：'自定义请求头字段'。

1.:active伪类不生效

阻止touchstart默认事件。（如果没有什么手势事件的需求的话，最好全部禁止手势事件）

2.input=“search”无法触发输入法。

需要<form>标签包起来才能触发。

3.禁用长按事件。

*{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

//解决ios Input标签无法输入问题
input {      
     -webkit-user-select:auto; //webkit浏览器    
}

4.webview回弹效果。

如果页面是全屏，不超过可视高度的话，建议禁用touchmove事件。

如果页面不是全屏，超过可视高度的话，就不要禁用touchmove事件。

PS：虽然有办法阻挡X5内核（QQ浏览器内核）的“网页有XXX提供”的这些信息，但是并没有真正阻挡iphone的回弹效果，拖拽还是会回弹。

5.ios回退不刷新

var isPageHide = false
window.addEventListener("pageshow", function() {
    if (isPageHide) {
        window.location.reload()
    }
})
window.addEventListener("pagehide", function() {
    isPageHide = true
})

6.移动兼容性测试。

使用ie浏览器来测试兼容语法。（vconsole这个测试工具检测不出来，555）

PS：IE11浏览器的开发者工具可以排查出不兼容的es6语法，只要IE11能运行，android4.x或者ios9以上的浏览器都可以运行。