移动端iPhone系列适配问题
问题一:苹果手机上的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*/
}
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系列适配问题的更多相关文章
- 移动端iPhone系列适配问题的一些坑
完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过 ...
- Web移动端---iPhone X适配(底部栏黑横线)
一.相信大家有被iPhone X底部黑色横线支配的恐惧 上面我们可以看到,底部的导航栏被一条黑色横线所盖住,那么就很烦.下面我们可以开始进行适配环节 1.首先我们可以用 JS 判断手机环境是不是 iP ...
- iPhone系列设备媒体查询:
这就引出一个问题,我们在对iPhone设备适配时候,又多出几种情况.iPhone系列设备媒体查询: @media only screen and (min-device-width: 320px){ ...
- 使用vw做移动端页面的适配
Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段 ...
- PC端、移动端的页面适配及兼容处理
转自 一.关于移动端兼容性 目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有 ...
- 混合式App开发 Apicloud 官方iPhone X 适配
iPhone X 适配 由于iPhone X的特殊造型,为了方便开发者对iPhone X进行适配,苹果在iOS 11中引入了Safe Area的概念,引擎也在api对象下添加了safeArea属性和s ...
- iOS - iPhone屏幕适配/启动图适配/APP图标适配(iPhone最全尺寸包含iPhoneX/XR/XS/XS Max等)
趁iPhone新品还没有发布,先整理一下屏幕适配.启动图适配.APP图标适配的笔记,方便以后查阅: 注:部分图片来源于网络 违删; (一)iPhone屏幕适配: (1)屏幕分辨率: ①设计尺寸规范(表 ...
- iPhone X适配方案
iPhone X适配方案 https://github.com/Wscats/iPhone-X 绝对长度单位 英寸 厘米 毫米 磅 pc inch cm mm pt pica 相对长度单位 是网页设计 ...
- iOS开发点滴:iPhone屏幕适配
最近开始做iOS开发,遇到一些小问题和解决方法,记录下. 今天是iPhone屏幕适配 iPhone5出来之后屏幕就有iPhone就有了2种尺寸:3.5寸和4寸,xcode 5 的IB设计器里面界面 ...
随机推荐
- Mybatis笔记 – 入门程序开发
一.Mybatis开发环境 JDK:jdk_1.7 Eclipse:Oxygen.1 Release (4.7.1) MySQL:MySQL Servr 5.7 1.添加相关ja r包 mybatis ...
- 让delphi2010能有delphi7的版面布局
如何让delphi2010能有delphi7的版面布局呢?答案是肯定的,方法如下: 1)在工具栏点右键,选择components 会看到delphi7中的组件显示面板 2)tools > opt ...
- hdu-4893
http://acm.hdu.edu.cn/showproblem.php?pid=1394 题意: 给定一个数组a,一开始数组里面的元素都是0,现在有三个操作: 操作1:给第k个数字加上d. 操作2 ...
- 01_springboot2.x之springboot入门
1.简介 Spring Boot来简化Spring应用开发,约定大于配置, 去繁从简,just run就能创建一个独立的,产品级别的应用. 优点: 1.简化Spring应用开发的一个框架: 2.整个S ...
- USACO 2009 Open Treasure Cave /// DFS||并查集 oj26215
题目大意: 输入 p,n,t :p为地点数 判断 t 能否回到源点1 接下来n行 每行输入 a b c: a能到达b和c Sample Input 13 6 76 7 82 3 410 11 128 ...
- Largest Rectangle in a Histogram /// 单调栈 oj23906
题目大意: 输入n,,1 ≤ n ≤ 100000,接下来n个数为每列的高度h ,0 ≤ hi ≤ 1000000000 求得最大矩阵的面积 Sample Input 7 2 1 4 5 1 3 34 ...
- VMware Workstation 10 配置Ubuntu环境
分享到 一键分享 QQ空间 新浪微博 百度云收藏 人人网 腾讯微博 百度相册 开心网 腾讯朋友 百度贴吧 豆瓣网 搜狐微博 百度新首页 QQ好友 和讯微博 更多... 百度分享 VMware Work ...
- springcloud(十五):服务网关zuul
前面的文章我们介绍了,Eureka用于服务的注册于发现,Feign支持服务的调用以及均衡负载,Hystrix处理服务的熔断防止故障扩散,Spring Cloud Config服务集群配置中心,似乎一个 ...
- Hibernate的一对一映射
一.创建Java工程,新建Lib文件夹,加入Hibernate和数据库(如MySql.Oracle.SqlServer等)的Jar包,创建 hibernate.cfg.xml 文件,并配置,配置项如下 ...
- iOS开发本地推送
1.简介 本地通知是由本地应用触发的,它是基于时间行为的一种通知形式,例如闹钟定时.待办事项提醒,又或者一个应用在一段时候后不使用通常会提示用户使用此应用等都是本地通知. 2.创建UILocalNot ...