移动端开发的坑

316 阅读1分钟

最近进行移动端开发 主要用rem做适配 在开发过程中还是遇到了很多坑的

IOS篇

在IOS端存在很多问题

1.样式

IOS端自带样式,与安卓有很多不同,为了各个终端样式统一,可以使用 -webkie-appearence:none来清除样式, 并进行统一的编写,但是吧,这样可能会引发第二个问题。

2.-webkit-appearence:none 带来的问题

-webkit-appearance会将webkit浏览器中的元素默认样式去除。checkbox在这个属性下就直接隐藏掉了。然后用JS获取checkbox值时Webkit浏览器会报很奇怪的错误。给这个元素重新赋上-webkit-appearance:checkbox就不会报错了。

3.事件委托

在IOS中,事件不可委托至document,如委托至document,则事件不会触发,所以需将事件委托在父元素之上

4.输入框放大

IOS端输入框点击会放大,且无法自动恢复,利用meta标签来解决这个问题。

<meta name="apple-mobile-web-app-capable" content="yes"> 							
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">