专栏首页编程微刊移动端iPhone系列适配问题的一些坑

移动端iPhone系列适配问题的一些坑

完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过,下面就是开发过程中遇到的一些坑。

图片.png

图片.png

问题一:苹果手机上的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*/

}

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

文末福利:

福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880 福利二:微信小程序入门与实战全套详细视频教程

image

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序组件库ColorUI的使用,一键复制粘贴

    在开发uniapp的时候,最佳的ui框架就是ColorUI,ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更...

    祈澈菇凉
  • 小程序点击按钮弹出可填写框

    这是项目里面一个简单的效果,小程序点击按钮弹出可填写框,摘下代码,方便之后遇到的时候可以直接拿来使用。 效果如下:

    祈澈菇凉
  • jQuery 遍历 - siblings() 方法应用

    每天写个小demo,最近工作小到1像素,大到n多优化,这个行业真的是有项目的时候忙的要死,没项目的时候闲的发慌,趁着办公室没人的时候,安安静静继续写代码,一个关...

    祈澈菇凉
  • CentOS使用SMTP第三方发送邮件

    SMTP称为简单邮件传输协议(Simple Mail Transfer Protocal),目标是向用户提供高效、可靠的邮件传输。它的一个重要特点是它能够在传送...

    张琳兮
  • 03——FFmpeg分离音频视频

    哈哈,期待已久,终于开始干活了,本期开始,我们就要玩转ffmpeg命令行了,今天,我们首先来看看如何分离音视频!

    视界音你而不同
  • 工具篇 | 常用邮箱POP3/SMTP设置

    1、QQ邮箱 接收邮件服务器:pop.qq.com,使用SSL,端口号995 发送邮件服务器:smtp.qq.com,使用SSL,端口号465

    努力在北京混出人样
  • AI智能识别垃圾:这款众望所归的神器终于上线了!

    7月1日起,《上海市生活垃圾管理条例》正式实施。上海市民们每日积极上线,练级打怪、刷了一个多月经验,正式进入了强制垃圾分类时代。

    CDA数据分析师
  • Microchip推出支持Apple HomeKit的Wi-Fi SDK

    Microchip Technology Inc.(美国微芯科技公司)日前宣布推出支持Apple HomeKit而且经过全面认证的Wi-Fi®软件开发工具包(S...

    BestSDK
  • 如何用树莓派和显示器制作一面“魔镜”

    这篇文章介绍的是用树莓派、显示器、双面镜制作的一面镜子。这面镜子中包含了一个黑色背景的网页,可以显示天气预报、日期、时间以及一句随机生成的问候语。完成这个DIY...

    FB客服
  • 走进AI时代的文档识别技术 之文档重建

    ? 导读:作者系腾讯QQ研发中心——CV应用研究组的totoralin。本文主要介绍基于深度学习的文档重建框架,通过文档校正、版面分析、字体识别和阅读排序将纸...

    腾讯技术工程官方号

扫码关注云+社区

领取腾讯云代金券