IE没人用了,不用兼容了,但苹果公司这个最大的流氓还是需要兼容的。
select的onclick事件不生效
iOS、mac os中,只有<a>
、button
能有click事件,其他都不生效。
解决办法:
使用其他事件代替onclick。
input无法输入
增加下面代码:
input,textarea{
-webkit-user-select:text;
-khtml-user-select:all;
-moz-user-select:all;
-ms-user-select:all;
user-select: all;
}
下面是网上找的,本人没有遇到:
1.点击效果:
一般的active用法在iPhone上不起用。需要js控制给需要点击效果的div或者a标签添加一个空的touchstart方法:$('#page').addEventListener('touchstart',function () {});
为了方便可以全局添加:document.addEventListener('touchstart', function () {});
网上说还有这种用法,<html ontouchstart="" onmouseover="">
但是还未亲测
2.border-right上下有间隙:
div里套div,里面的div设了border-right,padding:15px 0。这样发现ios上border-right不是完整的即上下有间隙。我是把高度设死了,不用padding来避免这个问题。
3.键盘挡着input
把输入框放在ios的屏幕下面。当点击输入框时会填出键盘,可能会盖住输入框。解决该问题请参考weui
4.好像有时margin-bottom失效
发现如果把底部导航栏fixed在页面底部。由于导航栏脱离文档流,为了使导航栏不挡着下面的div,我试了将下面的div设了margin-bottom,让margin-bottom的高大于导航栏的高。
在ios上试了好像不行,margin-bottom似乎失效了。后来在footer下面的div后面加了个高度大于导航栏的空的背景色跟body背景色一样的div。解决了这个问题。
5.关闭网页自动识别电话号码
<meta name="format-detection" content="telephone=no" />
6.禁止ios端网页字体复制粘贴,块级高亮
*{
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-tap-highlight-color: rgba(0, 0, 0, 0);
-o-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
text-decoration: none;
}