码迷,mamicode.com
首页 > 移动开发 > 详细

移动端iPhone系列适配问题

时间:2019-04-02 09:21:30      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:user   shu   NPU   测试   ack   --   一个   put   针对性   

问题一:苹果手机上的input按钮自带渐变效果

一样的代码,为啥在苹果手机上的input按钮就自带渐变效果,搞特殊吗?怎么让它显示正常?只需要加上outline:0px; -webkit-appearance:none; 清除原有样式,同时苹果手机上的input按钮自带圆角需要按需要去掉

技术图片
问题二:表单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*/

}
 
技术图片
1.png

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事件解决这个问题,大力推荐。



链接:https://www.jianshu.com/p/b26dce4d548f



移动端iPhone系列适配问题

标签:user   shu   NPU   测试   ack   --   一个   put   针对性   

原文地址:https://www.cnblogs.com/seven077/p/10640443.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!