记一次移动端H5开发所遇到的问题与细节,以及ios兼容

第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video,

一.移动端禁止缩放兼容

主要属性是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文件的字符编码

2.设置浏览器的兼容模式（让IE使用最新的浏览器渲染）

3.是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出

4.禁止将页面中的一连串数字识别为电话号码、并设置为手机可以拨打的一个连接。

这个标签的默认值是telephone=yes。

5.删除默认的苹果工具栏和菜单栏

当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

6.控制状态栏显示样式

content设置状态栏颜色,iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

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 name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />  <meta name="apple-mobile-web-app-capable" content="yes" />  <meta name="apple-mobile-web-app-status-bar-style" content="black" />  <meta name="format-detection" content="telephone=no, email=no" />  <meta name="renderer" content="webkit">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="HandheldFriendly" content="true">  <meta name="MobileOptimized" content="320">  <meta name="screen-orientation" content="portrait">  <meta name="x5-orientation" content="portrait">  <meta name="full-screen" content="yes">  <meta name="x5-fullscreen" content="true">  <meta name="browsermode" content="application">  <meta name="x5-page-mode" content="app">  <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：

在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;

五.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:[email protected]">点击我发邮件</a>

//2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）
<a href="mailto:[email protected][email protected]">点击我发邮件</a>

//3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）
<a href="mailto:[email protected][email protected]&[email protected]">点击我发邮件</a>

//4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址
<a href="mailto:[email protected];[email protected]">点击我发邮件</a>

//5.包含主题，用?subject=
<a href="mailto:[email protected]?subject=邮件主题">点击我发邮件</a>
//6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行
<a href="mailto:[email protected]?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a>

//7.内容包含链接，含http(s)://等的文本自动转化为链接
<a href="mailto:[email protected]?body=http://www.baidu.com">点击我发邮件</a>

//8.内容包含图片（PC不支持）
<a href="mailto:[email protected]?body=">点击我发邮件</a>

//9.完整示例
<a href="mailto:[email protected];[email protected]?[email protected]&[email protected]&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下

十四.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兼容

猜你喜欢