完成移动端的开发项目之后，发现谷歌自带的调试器似乎没有什么太大的作用，整天借同事的苹果手机测bug,尽管同事不厌其烦，但还是觉得这iPhone系列适配问题适配到想逃逃逃，好在项目已经顺利完成，测试通过，下面就是开发过程中遇到的一些坑。 ### 问题一：苹果手机上的input按钮自带渐变效果 一样的代码，为啥在苹果手机上的input按钮就自带渐变效果，搞特殊吗？怎么让它显示正常？只需要加上outline:0px; -webkit-appearance:none; 清除原有样式，同时苹果手机上的input按钮自带圆角需要按需要去掉 outline:0px; -webkit-appearance:none; 图片.png ### 问题二：表单input元素获取焦点时页面被放大的解决办法 原因：在iPhone上点击input框会有一个动画效果，这是苹果公司默认设置的，每次input获取焦点都会使页面放大，效果非常不好看，经过多方百度寻求到了一个完美的解决方案 ~~~ <!--加入meta标记--> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width"> ~~~ user-scalable改为no即可。 ### 问题三：iPhone6 Plus大屏幕的适配问题 有时候，明明已经用了简单粗暴的媒体查询viewport的方式： <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> 但是，还是会出现不适配的问题哦，那就在原有页面的基础上，再针对相应的屏幕大小单独写样式做适配。 ~~~ @media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){ /*iphone6*/ } @media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){ /*iphone6plus*/ } ~~~ PS:其实也可以直接使用实际的 device-width：如device-width:375px ### 问题四：移动端input 无法获取焦点的问题 测试的时候发现了一个bug,移动端的input都不能输入了，后来发现原来是这个梗 ` －webkit－user-select ：none ;` 原因：在移动端开发中，我们有时有针对性的写一些特殊的重置，在整个项目之中有一个需求，禁止用户进行复制.选择.，于是写了这样的代码 -webkit-user-select: none;影响到了input获取焦点。 办法:把-webkit-user-select:none改成-webkit-user-select:auto;覆盖掉或者直接注释掉就行，我的项目是需要的，就不用注释了。 ### 问题五：手机端 click 事件会有大约 300ms 的延迟 原因：手机端事件如下 touchstart –> touchmove –> touchend or touchcancel –> click 因为在touch事件触发之后，浏览器要判断用户是否会做出双击屏幕的操作，所以会等待300ms来判断，再做出是否触发click事件的处理，所以就会有300ms的延迟 解决方法：使用touch事件来代替click事件，如 zepto.js 的tap事件和fastClick，注：每次我都使用fastclick解决，这个插件最良心了，都有相应的事件可以代替click事件解决这个问题，大力推荐。