记一次移动端H5开发所遇到的问题与细节,以及ios兼容
第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video,
一.移动端禁止缩放 兼容
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
主要属性是user-scalable=no"，
- width：视口的宽度，width=device-width：宽度是设备的宽度
- initial-scale：初始化缩放，- initial-scale=1.0：不缩放
- user-scalable：是否允许用户自行缩放，取值0或1，yes或no
- minimum-scale：最小缩放
- maximum-scale：最大缩放
- 一般设置了不允许缩放，就没必要设置最大最小缩放了。
在开发移动端时，meta 还有很多属性可以设置，比如
1.设置当前html文件的字符编码
<meta charset="UTF-8">
2.设置浏览器的兼容模式（让IE使用最新的浏览器渲染）
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
3.是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
<meta http-equiv="Pragma" content="no-cache"/>
4.禁止将页面中的一连串数字识别为电话号码、并设置为手机可以拨打的一个连接。
这个标签的默认值是telephone=yes。
<meta content="telephone=no" name="format-detection"/>
5.删除默认的苹果工具栏和菜单栏
当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
<meta content="yes" name="apple-mobile-web-app-capable"/>
6.控制状态栏显示样式
content设置状态栏颜色,iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
7.条件注释
!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
- html5shiv让浏览器可以识别html5的新标签；
- respond让低版本浏览器可以使用CSS3的媒体查询。
8.iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
<meta content="yes" name="apple-mobile-web-app-capable">
还有其他的这里就不一一介绍了
<!-- 视图窗口，移动端特属的标签。 -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略页面中的数字识别为电话号码,email识别 -->
<meta name="format-detection" content="telephone=no, email=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
二.移动端Retina屏幕1px边框问题
造成边框变粗的原因：因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素
1.设置0.5px边框：解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给html标签元素添加个class。
if (window.devicePixelRatio && devicePixelRatio >= 2)
{
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem); }
if(testElem.offsetHeight==1) {
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
} // 脚本应该放在内，如果在里面运行，需要包装 $(document).ready(function() {})
然后使用：
div{border:1px solid #000}; . hairlines div{border-width:0.5px}
优点：代码简单 缺点：无法兼容安卓设备、 iOS 8 以下设备。
2.使用background-image实现
background-image:你要先准备一张符合你要求的图片。然后将边框模拟在背景上。
.background-image-1px { background: url(../img/line.png) repeat-x left bottom; -webkit-background-size: 100% 1px; background-size: 100% 1px; }
优点：可以设置单条,多条边框 ；没有性能瓶颈的问题 缺点：修改颜色麻烦, 需要替换图片；圆角需要特殊处理，并且边缘会模糊
3.使用box-shadow模拟边框
利用css 对阴影处理的方式实现0.5px的效果;
.box-shadow-1px{box-shadow:inset 0 -1px 1px -1px #000;
优点：代码少，可满足所有场景 缺点：边框有阴影，颜色变浅；
4.viewport + rem 实现
同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2 时，输出viewport：
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
在devicePixelRatio = 3 时，输出viewport：<meta name="viewport" content="width=device-width,initial-scale=0.33333333333333333,maximum-scale=0.33333333333333333,minimum-scale=0.33333333333333333,user-scalable=no">
这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。
对于这种方案，可以看看《使用Flexible实现手淘H5页面的终端适配》
优点：所有场景都能满足；一套代码，可以兼容基本所有布局；这个也是我们开发移动端时需要使用的rem布局，这个对移动端开发很重要，
缺点：老项目修改代价过大，只适用于新项目；
5.伪类 + transform 实现 针对老项目
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
单条border样式设置：
.scale{ position: relative; border:none; } .scale:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
三.判断设备类型是android还是ios
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid) {
console.log('Android')
} else if(isiOS) {
console.log('IOS')
} else {
console.log('PC“)
}，
/
/判断访问终端
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}；
使用方法：
//判断是否IE内核
if(browser.versions.trident){ alert("is IE"); }
//判断是否webKit内核
if(browser.versions.webKit){ alert("is webKit"); }
//判断是否移动端
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("移动端"); }
检查浏览器语言：
currentLang = navigator.language; //判断除IE外其他浏览器使用语言if(!currentLang){//判断IE浏览器使用语言currentLang = navigator.browserLanguage;}
四.ios滑动卡顿问题
-webkit-overflow-scrolling: touch;
touche://使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
auto://使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
五.ios移动端头部底部fixed定位，输入框收回闪屏问题
只需要在中间部分外层div添加css样式
position:fixed；top:50px;bottom:50px;overflow:scroll
六.html在移动端IOS点击闪屏问题
html或者body{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
七.打电话，发短信，写邮件
1.打电话:<a href:"tel:10086">拨打10086</a>
2.发短信:<a href="sms:10086">发短信给10086</a> //winphone系统无效
3.发邮件：
//注：在添加这些功能时，第一个功能以"?"开头，后面的以"&"开头
//1.普通邮件
<a href="mailto:863139978@qq.com">点击我发邮件</a>
//2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">点击我发邮件</a>
//3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">点击我发邮件</a>
//4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址
<a href="mailto:863139978@qq.com;384900096@qq.com">点击我发邮件</a>
//5.包含主题，用?subject=
<a href="mailto:863139978@qq.com?subject=邮件主题">点击我发邮件</a>
//6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行
<a href="mailto:863139978@qq.com?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a>
//7.内容包含链接，含http(s)://等的文本自动转化为链接
<a href="mailto:863139978@qq.com?body=http://www.baidu.com">点击我发邮件</a>
//8.内容包含图片（PC不支持）
<a href="mailto:863139978@qq.com?body=">点击我发邮件</a>
//9.完整示例
<a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0A
">点击我发邮件</a>
八.修改移动端难看的点击的高亮效果，iOS和安卓下都有效
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
九.阻止旋转屏幕时自动调整字体大小
* {
-webkit-text-size-adjust: none;
}
十.iOS下取消input在输入的时候英文首字母的默认大写
<input type="text" autocapitalize="none">
十一.移动端click屏幕产生200-300ms的延时响应
1.FastClick解决延迟点击的源码解析:
使用第三方js文件
下载地址：https://github.com/ftlabs/fastclick，页面添加相关js文件。实例化如下：
首先，我们来看FastClick的使用。
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
2.zepto的touch模块，tap事件也是为了解决在click的延迟问题
十二.input的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决方案时是设置css
line-height：normal;
十三.点击元素产生背景或边框怎么去掉
//ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；
//android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；
//winphone系统,点击标签产生的灰色半透明背景，能通过设置<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
}
// 也可以
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
<meta name="msapplication-tap-highlight" content="no">
十四.audio元素和video元素在ios和andriod中无法自动播放;
这个在浏览器是默认是不自动播放的，这个是浏览器的机制，所以要自动播放就只能用户去触发某个事件，才能自动播放，这里找到了一些方法（ios），可以参考下;
//JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){
music.play();
})
/微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
十五.超实用的css样式
//去掉webkit的滚动条——display: none;
//其他参数
::-webkit-scrollba //滚动条整体部分
::-webkit-scrollbar-thumb //滚动条内的小方块
::-webkit-scrollbar-track //滚动条轨道
::-webkit-scrollbar-button //滚动条轨道两端按钮
::-webkit-scrollbar-track-piece //滚动条中间部分，内置轨道
::-webkit-scrollbar-corner //边角，两个滚动条交汇处
::-webkit-resizer //两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
// 禁止长按链接与图片弹出菜单
a,img { -webkit-touch-callout: none }
// 禁止ios和android用户选中文字
html,body {-webkit-user-select:none; user-select: none; }
// 改变输入框placeholder的颜色值
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }
// android上去掉语音输入按钮 input::-webkit-input-speech-button {display: none}
// 阻止windows Phone的默认触摸事件
/*说明：winphone下默认触摸事件事件使用e.preventDefault是无效的，可通过样式来禁用，如：*/
html { -ms-touch-action:none; } //禁止winphone默认触摸事件
十六.手机拍照和上传图片
//IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能。Winphone不支持
<input type="file" accept="images/" />
<input type="file" accept="video/" />
十七.消除transition闪屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
十八.判断微信浏览器
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
return true;
}else{
return false;
}
}
十九.监听浏览器返回事件
window.addEventListener("popstate", function (e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);
二十.重力感应事件
// 运用HTML5的deviceMotion，调用重力感应事件，可以去HTML5了解这个事件，HTML5有很多新增属性和事件，都可以了解学习下
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
var speed = 30;//speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
//简单的摇一摇触发代码
alert(1);
}
lastX = x;
lastY = y;
lastZ = z;
}
二十一.开启硬件加速
//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。
.css {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
二十二.定位的坑
//fixed定位
//1.ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
//2.android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
//3.ios4下不支持position:fixed
//解决方案：使用Iscroll，如：
<div id="wrapper">
<ul>
<li></li>
.....
</ul>
</div>
<script src="iscroll.js"></script>
<script>
var myscroll;
function loaded(){
myscroll=new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded",loaded,false);
</script>
//position定位
//Android下弹出软键盘弹出时，影响absolute元素定位
//解决方案:
var ua = navigator.userAgent.indexOf('Android');
if(ua>-1){
$('.ipt').on('focus', function(){
$('.css').css({'visibility':'hidden'})
}).on('blur', function(){
$('.css').css({'visibility':'visible'})
})
}
记一次移动端H5开发所遇到的问题与细节,以及ios兼容相关推荐
- html5 拖拽滚动条,js 简易版滚动条实例(适用于移动端H5开发)
废话不多说,直接上代码 滑动条 *{ margin: 0; padding: 0; } #content{ margin-top: 50px; width:100%; height: 200px; b ...
- 在移动端H5开发中(关于安卓端position:fixed和position:absolute；和虚拟键盘冲突的问题，以及解决方案)
在移动端H5开发中(关于安卓端position:fixed和position:absolute:和虚拟键盘冲突的问题,以及解决方案) 参考文章: (1)在移动端H5开发中(关于安卓端position: ...
- 移动端H5开发不了解一下抓包嘛？
在PC项目开发中,一般会使用Chrome的开发者工具进行调试,亦或是其他浏览器的开发工具进行调试. 在平常开发中,我一般会使用Chrome或者是Safari进行调试. Chrome的功能非常强大,它的 ...
- 钉钉端H5开发调试怎么搞
H5开发本地调试教程 作为一名前端开发,大家平时工作中或多或少都有接触或需要开发H5页面的场景,在开发过程中,如何像PC端页面一样有有丝滑的体验呢? 不同的情况需要在不同的端调试更方便有效: 1. 在 ...
- 移动端H5开发遇到的问题
移动端开发必会出现的问题和解决方案 H5开发过程中难免会遇到一些兼容性等爬过坑的问题 移动端 H5 相关问题汇总: 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面 ...
- 移动端h5开发分辨率自适应
在做H5开发时,都会遇到屏幕分辨率自适应问题,那么怎么更好地让页面自适应? 这里介绍一种用js计算屏幕宽度+rem单位的方法(网易新闻在用) 不同手机有不同的分辨率,UI在做设计图的时候大都会以iPh ...
- 移动端h5开发,华为手机输入法键盘影响页面布局的问题。
在做移动端h5的时候,有些简单的页面,我们一般都会给body写上: width:100%; height:100%; 然后给一个满屏的背景图,简单方便的适应不同屏幕的手机. 有时候为了采集用户信息,页 ...
- 移动端 H5 开发指南 涉及html、css、js三大方向
HTML方向 调用系统功能 <!-- 拨打电话 --> <a href="tel:10086">拨打电话给10086小姐姐</a><!-- ...
- 移动端 h5开发相关内容总结(三)
之前写过两篇开发中遇到的问题和解决方案.当时是CSS 和 JavaScript 分开写的.现在写这篇文章的时候感觉很多内容都是有内在联系的,所以不好分开. 给大家分享一下这半年来的感受吧: 知道和理解 ...
最新文章
- HDOJ---1257 最少拦截系统[线性DP]+NYOJ---拦截导弹[输出最长单调子序列的长度]
- centos 更换java版本_centos7 更换jdk版本
- Shell脚本编程剖析（更新完毕）
- 【Java代码】道格拉斯-普克 Douglas-Peucker 抽稀算法分析及15w个坐标点抽稀到3.7w耗时从360s+优化到365ms接近1000倍的速度提升源码分享（并行流+多线程+泛型）
- c#10中的namespace
- linux vi 内存,Vi Linux内存 之 Slub分配器（四）
- cvCreateTrackbar() 添加滚动条调节参数
- python实现城市到省份的转换
- Netch + Connectify 实现代理转全局并共享给其他设备，例如Kindle
- Scala基本类型及操作、程序控制结构
- cad2020直装版无需注册机
- 微信开发遇到的那些坑
- 不是所有国产软件都像360一样流氓！这些良心国产软件不该被埋没
- arn : 无法加载文件 C:\Users\zky\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.
- PotPlayer播放DST音频的mkv电影解码错误
- 阿里云云服务器ECS简单使用
- 来自腾讯相当好的文章：研发效能度量实践指南
- [英语六级] 六级通关笔记 — 翻译题
- php 网页手册模板,网站表单模板
- Linux零基础入门到进阶