移动web前端开发小结 Android组件:WebView兼容问题 IOS组件:WKWebView和UIWebView兼容问题
注意:Chrome模拟手机的显示的界面是有误差的,强烈建议一定要在真机测试自己的移动端页面(以移动端页面为准)。
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以上的浏览器都可以运行。