H5移动端ios/Android兼容性总结
先说一下viewport
先上模板
<meta charset="utf-8">
<!--主要I是强制让文档的宽度与设备宽度保持1:1,最大宽度1.0,禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签,允许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签,iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止数字自动识别为电话号码,这个比较有用,因为一串数字在iphone上会显示成蓝色,样式加成别的颜色也是不生效的。-->
<meta content="telephone=no" name="format-detection">
<!--禁止email识别-->
<meta content="email=no" name="format-detection">
写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳
禁止复制、选中文本
.el {-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;
}
苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden; 给不同屏幕大小的手机设置特殊样式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才可以响应
方法:可以用html5的oninput事件去代替keyup
<input type="text" id="testInput">
<script type="text/javascript">document.getElementById('input').addEventListener('input', function(e){var value = e.target.value;});
</script>
ios 设置input 按钮样式会被默认样式覆盖
解决方式如下:
input,textarea {border: 0;-webkit-appearance: none;
}
消除 IE10 里面的那个叉号:
input:-ms-clear{display:none;}
手机上的flex布局时会有兼容性问题,只用新版本的会出现安卓手机不识别的现象 flex布局对于低版本的安卓,不支持flex-wrap:wrap属性,但是ios系统支持换行属性,这个时候如何解决呢?当然是不使用换行,用其他方式代替。
.box{display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */display: -moz-box; /* 老版本语法: Firefox (buggy) */display: -ms-flexbox; /* 混合版本语法: IE 10 */display: -webkit-flex; /* 新版本语法: Chrome 21+ */display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
input 的placeholder属性会使文本位置偏上
line-height: (和input框的高度一样高)---pc端解决方法
line-height:normal ---移动端解决方法
input type=number之后,pc端出现上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none !important;margin: 0;
}
实现android和ios系统手机打开相机并可选择相册功能
<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>$(function () {//获取浏览器的userAgent,并转化为小写var ua = navigator.userAgent.toLowerCase();//判断是否是苹果手机,是则是truevar isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);if (isIos) {$("input:file").removeAttr("capture");};
})
移动端 HTML5 audio autoplay 失效问题
这个不是 BUG,由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。
解决方法思路:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。
解决代码:
document.addEventListener('touchstart',function() {document.getElementsByTagName('audio')[0].play();document.getElementsByTagName('audio')[0].pause();
});
移动端 video在部分android机播放之后浮在最上层,设置z-index无效
这个目前没有好的办法解决
情景一:页面有视频,点击页面按钮显示弹出层(比如让用户输入用户信息),这时候视频会出现在弹出层上面,是不是很-d疼?
方案:点击按钮时候把video隐藏hide,关闭弹出层show,过程中视频声音还在
情景二:页面很长,往下翻滚时,视频在播放,脱离文档流
方案:页面滚动到某一合适位置把video隐藏hide,回滚到某一位置show,过程中视频声音还在
有些说position可以解决,我没有试
关于 iOS 系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格
this.value = this.value.replace(/\u2006/g,'');
关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)
iOS 浏览器横屏时会重置字体大小,设置 text-size-adjust 为 none 可以解决 iOS 上的问题,但桌面版 Safari 的字体缩放功能会失效,因此最佳方案是将 text-size-adjust 为 100% 。
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
移动端点击300ms延迟
原因:浏览器兴起初期,为了判断用户是双击还是单击,就设置了一个时间段300ms,用户单击后300ms后做事件处理,如果在300ms内连续点击,就判断为双击,做双击处理事件。
所以现在用click绑定事件呢,就会有300ms延迟的问题。
300ms尚可接受,不过因为300ms产生的问题,我们必须要解决。300ms导致用户体验并不是很好,解决这个问题,我们一般在移动端用tap事件来取代click事件。
推荐两个js,一个是fastclick,一个是tap.js
移动端点透问题
案例如下:
<div id="haorooms">点头事件测试</div>
<a href="www.baidu.net">www.baidu.com</a>
div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接,我们给div绑定tap事件:
$('#haorooms').on('tap',function(){$(this).hide();
});
我们点击蒙层时 div正常消失,但是当我们在a标签上点击蒙层时,发现a链接被触发,这就是所谓的点透事件。
原因:
touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的,这个时间大概在300ms左右,也就是说我们tap触发之后蒙层隐藏, 此时 click还没有触发,300ms之后由于蒙层隐藏,我们的click触发到了下面的a链接上。
解决:
1.尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
2.用fastclick,https://github.com/ftlabs/fastclick
3.用preventDefault阻止a标签的click
4.延迟一定的时间(300ms+)来处理事件 (不推荐)
5.以上一般都能解决,实在不行就换成click事件。
下面介绍一下touchend事件,如下:
$("#haorooms").on("touchend",function(event) {event.preventDefault();});
H5移动端ios/Android兼容性总结相关推荐
- H5移动端 iOS / Android 兼容性总结
1-首页meta标签 写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳 <meta charset="utf-8"> <!--主要I是强 ...
- chrome调试h5移动端(含android,ios)
chrome调试h5移动端 chrome调试(window+android) 需要条件:1.安卓开发人员需要对你页面调试得webview添加setWebContentsDebuggingEnabled ...
- H5移动端 IOS输入法遮挡input解决思路
思路 input 输入框置于页面底部,用absolute绝对定位于父级底部,在被唤起输入框时,会被IOS输入法自带的toolbar遮挡住input. So,我的思路就是:点击input框后,延时出现, ...
- 移动端热更新方案(iOS+Android)
PPT资源包含iOS+Android 各种方案分析:https://github.com/qiyer/Share/blob/master/%E7%83%AD%E6%9B%B4%E6%96%B0%E5% ...
- html select ios 闪屏,移动端常见的兼容性问题.md
# 移动端常见的兼容性问题 ###### 1. meta 基础知识点如下 ``` // 启动或禁用自动识别页面中的电话号码 // 启动或禁用自动识别邮箱地址 // 设置 Web 应用是否以全屏模式运行 ...
- 深入浅出:移动端(Android 和 iOS)数据采集埋点 SDK
随着大数据时代的到来,越来越多公司注意到数据带来的价值,开始自建或购买一些第三方的数据平台.从数据流的角度看,平台对于数据的处理,一般有以下几个步骤: 其中,数据采集工作是后面几个步骤的基础,数据采集 ...
- H5, 遇到的 ios 兼容性问题
H5, 遇到的 ios 兼容性问题 1.ios 中日期格式 new Date('2019-10-11') 无效; 解决: new Date('2019-10-11'.replace(/\-/g, '/ ...
- android h5 禁止缩放,vue h5移动端禁止缩放代码
vue h5移动端禁止缩放代码 安卓 在index.html里面写 ios 在APP.vue里面写 window.onload = function() { document.addEventList ...
- 浅谈移动端图片压缩(iOS Android)
在 App 中,如果分享.发布.上传功能涉及到图片,必不可少会对图片进行一定程度的压缩.笔者最近在公司项目中恰好重构了双端(iOS&Android)的图片压缩模块.本文会非常基础的讲解一些图片 ...
最新文章
- 编程珠玑第八章——习题10查找数组中总和最接近0的子数组
- python 使用全局变量_如何在Python中的不同模块中使用全局变量
- 关于用例需要多少文档以及业务用例等等
- 喜大普奔!BFE 控制平面正式开源发布!
- Matplotlib 中文用户指南 3.5 艺术家教程
- 骆斌软件工程基础思维导图
- c语言输出合法的出栈算法,c语言栈的实现以及操作
- netcore里使用jwt做登陆授权
- 团队建立伊始的混沌状态(Thinking in CTO)
- xml 标签带有号php,php操作xml入门之xml基本介绍及xml标签元素
- 计算机科学与技术专业要选修的课程,计算机科学与技术专业课程探讨
- 基于open scene graph的虚拟校园系统的设计与实现
- 抖音无水印视频下载,不用借助第三方网站【详细教程】
- 联想YOGA 13笔记本电源适配器修理
- TEXMACS在ubuntu下的使用
- katana之渲染输出AOV
- JQuery Ajax 参数含有特殊字符
- Excel日期格式转为常规文本格式
- php设置延迟代码执行,PHP实现延迟执行程序
- 魔百盒CM211-2 ZG(朝哥代工)无WIFI版线刷救砖包(当贝桌面)
热门文章
- JavaWeb后端开发,数据库知识需要掌握到何种程度?
- 基于jsp+mysql+java+ssm高校学生心理测评网站——计算机毕业设计
- 学计算机的女生,是一种怎样的存在?笑喷~
- 【ECCV2018】Unsupervised Hard Example Mining from Videos for Object Detection
- Word编号经常感觉用不习惯?看看这4个编号技巧吧,省事又好用
- 职称考试计算机基础知识,中级职称计算机考试题「附答案」
- (二十二)岁月无声 - 1
- spring(day06)
- java 到服务器上读文件路径,java访问linux服务器读取文件路径
- 【个人博客网站】搭建引导手册