最近进行移动端开发 主要用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">
复制代码