跳至主要內容

移动端兼容

safari

移动端click点击事件300ms

300ms延迟由来

07年，苹果公司发布首款Iphone前夕，遇到一个问题：当时的网站都是为大屏设计，手机屏幕太小无法正常浏览，于是苹果工程师做了一些约定解决此类问题。 这些约定当中，最为有名的是双击缩放（double tap to zoom）,这是产生300ms延迟的根源。 用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。如果用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。 由此产生了300ms延迟问题。

方案:

  • 禁用缩放

  • 封装一个处理函数

    这个代码可以监测元素点击发生时的状态，从而避免300ms的延迟。 但这个方法有一个弊端，一次只能给一个元素去解决问题。

  • fastclick插件

    具体原理: https://www.cnblogs.com/ylweb/p/10549040.html

点击穿透问题

说完移动端点击300ms延迟的问题，还不得不提一下移动端点击穿透的问题。可能有人会想，既然click点击有300ms的延迟，那对于触摸屏，我们直接监听touchstart事件不就好了吗？ 使用touchstart去代替click事件有两个不好的地方。 第一：touchstart是手指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了touchstart事件，这不是我们想要的结果； 第二：使用touchstart事件在某些场景下可能会出现点击穿透的现象。

什么是点击穿透？ 假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。

这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。

表单样式重置

点击元素默认边框或背景怎么去掉

- ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；

- android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；

- 特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签 a,button,input,textarea {     -webkit-tap-highlight-color: rgba(0,0,0,0);     -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符 }

- 也可以{ -webkit-tap-highlight-color: rgba(0,0,0,0); } //winphone下 
    <meta name="msapplication-tap-highlight" content="no">

- 美化表单元素 //一、使用appearance改变webkit浏览器的默认外观 input,select { -webkit-appearance:none; appearance: none; }

禁用radio和checkbox默认样式

::-ms-check修改表单复选框或单选框默认图标，设置隐藏并使用背景图片来修饰 

input[type=radio]::-ms-check, input[type=checkbox]::-ms-check 

{ display:none; }

禁用pc端表单输入框默认清除按钮

::-ms-clear修改清除按钮，设置隐藏并使用背景图片来修饰 

input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear

{ display:none; }

移动端字体单位font-size选择px还是rem

// 如需适配多种移动设备，建议使用rem。以下为参考值：
html { font-size: 62.5%; }   //10*16 = 62.5%
//设置12px字体   这里注意在rem前要加上对应的px值，解决不支持rem的浏览器的兼容问题，做到优雅降级
body { font-size:12px; font-size:1.2rem; }

技巧

改变输入框placeholder的颜色值

::-webkit-input-placeholder { / *WebKit browsers* / color: #999; } :-moz-placeholder { / *Mozilla Firefox 4 to 18* / color: #999; } ::-moz-placeholder { / *Mozilla Firefox 19+* / color: #999; } :-ms-input-placeholder { / *Internet Explorer 10+* / color: #999; } input:focus::-webkit-input-placeholder{ color:#999; }
贡献者: guo