web移动端安卓和ios兼容问题
1、click300ms延迟
fastclick可以解决在手机上点击事件的300ms延迟
触摸事件的响应顺序为 touchstart --> touchmove --> touchend -->
click,也可以通过绑定ontouchstart事件,加快对事件的响应,解决300ms延迟问题若移动设备兼容性正常的话(IE/Firefox/Safari(IOS 9.3)及以上),只需加上一个meta标签
把viewport设置成设备的实际像素,那么就不会有这300ms的延迟。
<meta name="viewport" content="width=device-width">
- 设置meta标签viewport属性,使其无视设备的真实分辨率,直接通过dpi,在物理尺寸和浏览器之间重设分辨率,从而达到能有统一的分辨率的效果。并且禁止掉用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" viewport-fit=cover"/>
- viewport-fit=cover设置是为了解决有些ios手机页面下方出现空白问题。
2、使用rem进行屏幕适配,设置好root元素的font-size大小,然后在开发的时候,所有与像素有关的布局统一换成rem单位。针对不同的手机,使用媒体查询对root元素font-size进行调整
3、阻止旋转屏幕时自动调整字体大小
- 移动端开发时,屏幕有竖屏和横屏模式,当屏幕进行旋转时,字体大小则有可能会发生变化,从而影响页面布局的整体样式,为避免此类情况发生,只需设置如下样式即可
{-webkit-text-size-adjust: none;}
4、修改移动端难看的点击的高亮效果,iOS和安卓下都有效
-webkit-tap-highlight-color: rgba(0,0,0,0);
- 不过这个方法在现在的安卓浏览器下,只能去掉那个橙色的背景色,点击产生的高亮边框还是没有去掉,有待解决!
- 一个CSS3的属性,加上后,所关联的元素的事件监听都会失效,等于让元素变得“看得见,点不着”。IE到11才开始支持,其他浏览器的当前版本基本都支持。
pointer-events: none;
5、iOS下取消input在输入的时候英文首字母的默认大写
<input type="text" autocapitalize="none">
6、ios 表单元素 input 和textarea 默认有内阴影
-webkit-appearance: none;
7、input或者textarea输入框,键入内容的时候所触发的事件
ios:input、oninput,比keyup,keydown 效果好
android:input或keyup都可以
- 综合使用:input 或区分安卓和ios分别赋予方法 区分安卓、IOS
const u = navigator.userAgent;
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isiOS) {return "ios";
} else {return "andriod";
}
8、禁止 iOS 识别长串数字为电话
<meta name="format-detection" content="telephone=no" />
9、禁止ios和android用户选中文字
-webkit-user-select: none;
10、取消在ios上自带的长按触发功能
-webkit-touch-callout: none;
11、calc的兼容处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀,目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc,所以要在之前增加一个保守尺寸:
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
12、fixed定位缺陷
- iOS下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位,android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位
- 解决方案: 可用iScroll插件解决这个问题
13、一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发 对不触发click事件的那些元素添加一行css代码
cursor: pointer;
14、消除transition闪屏问题
/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/-webkit-transform-style: preserve-3d;/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/ -webkit-backface-visibility: hidden;
15、CSS动画页面闪白,动画卡顿
尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位
开启硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
16、iOS系统中文输入法输入英文时,字母之间可能会出现一个六分之一的空格
- 通过正则去除
this.value = this.value.replace(/\u2006/g, '');
17、input的placeholder会出现文本位置偏上的情况
- input
的placeholder会出现文本位置偏上的情况:PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决方案时是设置css
line-height:normal;
18、浮动子元素撑开父元素盒子高度
父元素设置为
overflow: hidden;
19、overflow-x: auto在iOS有兼容问题
解决方法
-webkit-overflow-scrolling: touch;
VUE移动端开发兼容问题
1、iOS原始输入法问题
中文输入时,无法触发keyup事件,且keyup.enter事件无论中英文,都无法触发
- 1、改用input事件进行监听 2、将keyup监听替换成值的watch
input的focus()、autofocus无效
解决方案:
1、原生方法解决。
修改app的配置文件config.xml。ios的UIWebView
默认的KeyboardDisplayRequiresUserAction为false,设置为true就行,WKWebView
不支持这个属性。
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
- 2、H5若是通过页面任何地方的点击事件使弹出的input框自动获得焦点。可以通过:this.$refs.refName.focus()。
注意:此时input框不能是v-if或v-show动态控制的,可以设置为样式透明的透明度或z-index来控制。
2、
web移动端安卓和ios兼容问题相关推荐
- 【原】移动web资源整理(安卓、ios移动端兼容性问题归整)
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wi ...
- 【转】移动web资源整理(安卓、ios移动端兼容性问题归整)
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wi ...
- Web网页、安卓、ios、平板等的网站图标制作Favicon.ico
本文介绍如何制作准确的制作网站的图标.软件的图标等. 演示: 1,电脑浏览器的网站图标 -查看 2,手机浏览器的网站图标 3,ios的软件图标 4,安卓的软件图标 5,mac的safari图标 实现方 ...
- PC谷歌浏览器测试手机端安卓、IOS网页
在程序员开发工作中,我涉及到安卓和IOS兼容时,老是拿IOS实机来测试,安卓就直接在谷歌浏览器上测试,我发现这实在麻烦,因为在实机上有跨域问题,还要后端配合,今天心血来潮查了一翻资料,自己试了试,原来 ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
- Tomcat服务器配置https双向认证,使用JDK的keytool生成证书(适用于web、安卓、IOS)
Tomcat服务器配置https双向认证,使用JDK的keytool生成证书(适用于web.安卓.IOS) 一.原理 1.HTTP:平时浏览网页时候使用的一种协议.HTTP协议传输的数据都是未加密的( ...
- ios keychain 不被清理_卧槽牛弊了,已完美破姐!支持 安卓、ios、PC端,爽....
感谢您抽出 . . 阅读本文 谢谢您的关注写在前面 点击上方 " 老鬼黑科技 " 选择 " 置顶公众号 " 关键时刻,第一时间送达 老鬼会把全网最好的软件分享给 ...
- 【三端通用】微信即时通讯+视频聊天(安卓、IOS、小程序)项目完整版
# 简单描述: 此产品是本人耗时12day开发出来的,采用的是uniapp框架开发出来的,可快速云打包上线,也可以进行二次开发符合自己的具体需求. 为什么要选择uni-app框架去开发 ...
- web初学经验:对于IOS不兼容 text-algin:justify
最近在写页面的时候遇到了一个问题-当行文本双端对齐,大家都知道CSS属性中有一个"text-align:justify",但是这个属性使用的时候,要求还是挺多的,尤其是要实现单行文 ...
最新文章
- 利用SparkSQL(java版)将离线数据或实时流数据写入hive的用法及坑点
- 算法:二进制中1的个数
- qt for 3520a
- 利用浏览器调试功能 计算 百度网盘 文件数量 V2
- vijos p1460——拉力赛
- 若依二次开发添加 select 下拉框 变大 和 有空格存在
- PAT (Basic Level) Practice1024 科学计数法
- java读取redis数据_Java连接redis操作数据
- 深入浅出mysql笔记
- IDEA格式化HTML页面
- 值班 查看及重启系统
- 配置vps服务器,拨号换ip(一)
- tp6 workerman
- 使用Quick BI 制作企业数据分析报表
- 微信答题小程序开发功能概述
- java matlab 遗传算法_简单遗传算法MATLAB实现
- 最新的JavaScript知识总结,欢迎各位大佬指正,需要的留下邮箱,给你们发原稿(PDF版)...
- 地址解析(仅供参考与学习)<Java>
- android盒子共享,Android使用SMB协议共享电脑内文件方法
- 离散数学第6版25页41题