详讲H5、WebApp项目中常见的坑以及注意事项

2022-11-01 17:54:43

首先我们中会有一些常用的meta标签，如下：

<!--防止手机中网页放大和缩小-->

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

备注：width    设置viewport宽度，为一个正整数，或字符串‘device-width’

     height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置

initial-scale    默认缩放比例，为一个数字，可以带小数

minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数

maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数

user-scalable    是否允许手动缩放    <!--让浏览器使用webkit来解析-->

<meta name="renderer" content="webkit|ie-comp|ie-stand"><!--禁止ios设备将数字作为拨号连接，邮箱自动发送，点击地图跳转-->

<meta name="format-detection" content="telephone=no,email=no,adress=no"><!--强制显示全屏-->

<meta name="full-screen" content="yes"><!--开启对webapp的支持设置Web应用是否以全屏模式运行-->

<meta name="apple-mobile-web-app-capable" content="yes">

备注：如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。

    你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示<!--webapp应用下状态条颜色，默认值为黑色-->

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

备注：除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。

    如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。

    如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，

    即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，

    其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。<!--禁止浏览器从缓存中访问页面-->

<meta http-equiv="pragma" content="no-cache"><!--禁止自动识别电话号码-->

<meta name="format-detection" content="telephone=no"/><!--禁止自动识别邮箱-->

<meta content="email=no" name="format-detection"/><!--iphone中safari私有meta标签,允许全屏模式浏览,隐藏浏览器导航栏-->

<meta name="apple-mobile-web-app-capable" content="yes"/>

其次还有一些特殊情况需要用到的meta标签。可依照项目情况而定

<!-- 启用浏览器的极速模式(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">

一般移动端，有人喜欢用百分比，有人喜欢用rem，有人喜欢用em，我个人比较喜欢百分比和rem（主要我懒的算= =），下面我说我个人用的rem。我是为了完全自适应，多以通常会拿js先控制，然后再用rem，代码如下：

//动态设置页面的像素比，达到一比一还原设计稿

var iScale=;

iScale=iScale/window.devicePixelRatio;

document.write('<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,' +

'initial-scale='+iScale+',maximum-scale='+iScale+',minimum-scale='+iScale+'">');

var iWidth=document.documentElement.clientWidth;

document.getElementsByTagName("html")[].style.fontSize = iWidth/+"px";

这样我在项目里，比如720的设计图纸，h2字体大小36px，宽度400px，那么我就会这样写：

h2{

    font-size: /rem;

width: /rem;

}

以此类推，这样就会达到无论在什么设备上，都是1:1还原了设计图纸。当然我也会在一些section设置width的时候，用百分比。这些依照情况而定。

前段时间，一个朋友说有个bug一直不知道怎么解决，我一看，是浮动造成的，在iPhone6P、UC浏览器以及QQ浏览器上，底部固定定位的导航，右侧头部会有留白部分，好像掉下去一样。个人有个建议，在手机上，涉及到底部固定定位的导航，尽量使用弹性盒子flex布局，而不是使用浮动，当然，我个人很喜好弹性盒子，没办法，太懒。。。

项目中，我们往往会遇到一些判断浏览器的，判断设备的，如下：

//JS判断设备

function deviceType(){

var ua = navigator.userAgent;

var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];

for(var i=; i<len,len = agent.length; i++){

if(ua.indexOf(agent[i])>){

break;

        }

    }

}

//JS判断微信浏览器

function isWeixin(){

var ua = navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i)=='micromessenger'){

return true;

    }else{

return false;

    }

}

deviceType();
window.addEventListener('resize', function(){

deviceType();

})

这是一般时候用的，当然还有另外一种：

var browser = {
versions: function () {

var u = navigator.userAgent, app = navigator.appVersion;

return {     //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -, //IE内核
presto: u.indexOf('Presto') > -, //opera内核
webKit: u.indexOf('AppleWebKit') > -, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部

};

    }(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()

}if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面

var ua = navigator.userAgent.toLowerCase();//获取判断用的对象

if (ua.match(/MicroMessenger/i) == "micromessenger") {

//在微信中打开

}

if (ua.match(/WeiBo/i) == "weibo") {

//在新浪微博客户端打开

}

if (ua.match(/QQ/i) == "qq") {

//在QQ空间打开

}

if (browser.versions.ios) {

//是否在IOS浏览器打开

}

if(browser.versions.android){

//是否在安卓浏览器打开

}

} else {

//否则就是PC浏览器打开

}

下面是整理的一些常见的坑和解决办法：

1：微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整如下：

//以下代码可使Android机页面不再受用户字体缩放强制改变大小，但是会有1S左右延时，期间可以考虑loading来处理

if (typeof(WeixinJSBridge) == "undefined") {
document.addEventListener("WeixinJSBridgeReady", function (e) {

setTimeout(function(){

WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':}, function(res){

alert(JSON.stringify(res));

            })

        }, )

    });

}else{

setTimeout(function(){

WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':}, function(res){

alert(JSON.stringify(res));

        })

    }, )

}//IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小

body { -webkit-text-size-adjust:%!important; }//最好的解决方案：使用rem或百分比布局

2：移动端 HTML5 input date 不支持 placeholder 问题，可以设置如下即可解决

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

3：audio元素和video元素在ios和andriod中无法自动播放

<!--音频，写法一-->

<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>

<!--音频，写法二-->

<audio controls="controls">

    <source src="music/bg.ogg" type="audio/ogg">

    <source src="music/bg.mp3" type="audio/mpeg">

<!--优先播放音乐bg.ogg，不支持在播放bg.mp3-->

</audio>

<script>

//JS绑定自动播放（操作window时，播放音乐）

$(window).one('touchstart', function(){

music.play();

    })

//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {

music.play();

    }, false);

//备注

//1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常

//2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间

</script>

也可用如下方法：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）

<script>
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[].play();
document.getElementsByTagName('audio')[].pause();

    });

</script>

4：取消input在ios下，输入的时候英文首字母的默认大写

 <input autocapitalize="off" autocorrect="off" />

5：android上去掉语音输入按钮

 input::-webkit-input-speech-button {display: none}

6：关于 iOS 端字体的优化(横竖屏会出现字体加粗不一致等)

 -webkit-text-size-adjust: %;

 -ms-text-size-adjust: %;

 text-size-adjust: %;

7：禁止Android和iOS用户选中文字

 html,body {-webkit-user-select:none; user-select: none; }

8：H5GPS定位，我这里有个将GPS坐标转换成GCJ-02墨卡托坐标的js代码，可以精确的定位到具体地理位置。有捣鼓定位的可以试试。链接地址：http://download.csdn.NET/detail/zhaohaixin0418/9736523 具体定位问题，改天有时间给大家整理一个出来

9：某些Android手机圆角失效，代码如下：

 {background-clip: padding-box;}

10：关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

 this.value = this.value.replace(/\u2006/g, '');

11：打电话发短信写邮件怎么实现

<!--一、打电话-->

<a href="tel:0755-10086">打电话给:0755-10086</a>

<!--二、发短信，winphone系统无效-->

<a href="sms:10086">发短信给: 10086</a>

<!--三、写邮件

注：在添加这些功能时，第一个功能以"?"开头，后面的以"&"开头1.普通邮件-->

<a href="mailto:979976770@qq.com">点击我发邮件</a>

<!--2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）-->

<a href="mailto:979976770@qq.com?cc=alone_haixin@163.com">点击我发邮件</a>

<!--3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）-->

<a href="mailto:979976770@qq.com?cc=alone_haixin@163.com&bcc=723661@qq.com">点击我发邮件</a>

<!--4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址-->

<a href="mailto:979976770@qq.com;723661@qq.com">点击我发邮件</a>

<!--5.包含主题，用?subject=-->

<a href="mailto:979976770@qq.com?subject=邮件主题">点击我发邮件</a>

<!--6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行-->

<a href="mailto:979976770@qq.com?body=邮件主题内容%0A剧情再美%0A终究是戏">点击我发邮件</a>

<!--7.内容包含链接，含http(s)://等的文本自动转化为链接-->

<a href="mailto:979976770@qq.com?body=http://www.baidu.com">点击我发邮件</a>

<!--8.内容包含图片（PC不支持）-->

<a href="mailto:979976770@qq.com?body=<img src='images/1.jpg' />">点击我发邮件</a>

<!--9.完整示例-->

<a href="mailto:979976770@qq.com;723661@qq.com?cc=alone_haixin@163.com&bcc=723661@qq.com&subject=

[邮件主题]&body=剧情再美终究是戏%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>

12：手机拍照和上传图片

<!--IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能。Winphone不支持-->

<input type="file" accept="images/*" />

<input type="file" accept="video/*" />

13：美化表单元素的一些css：

/*一、使用appearance改变webkit浏览器的默认外观*/

input,select { -webkit-appearance:none; appearance: none; }

/*二、winphone下，使用伪元素改变表单元素默认外观1.禁用select默认箭头，::-ms-expand修改表单控件下拉箭头，设置隐藏并使用背景图片来修饰*/

select::-ms-expand { display:none; }

/*2.禁用radio和checkbox默认样式，::-ms-check修改表单复选框或单选框默认图标，设置隐藏并使用背景图片来修饰*/

input[type=radio]::-ms-check,

input[type=checkbox]::-ms-check { display:none; }

/*3.禁用pc端表单输入框默认清除按钮，::-ms-clear修改清除按钮，设置隐藏并使用背景图片来修饰*/

input[type=text]::-ms-clear,

input[type=tel]::-ms-clear,

input[type=number]::-ms-clear { display:none; }

另外给大家说一个重感力事件：

// 运用HTML5的deviceMotion，调用重力感应事件

if(window.DeviceMotionEvent){
document.addEventListener('devicemotion', deviceMotionHandler, false)

}

var speed = ;

var x = y = z = lastX = lastY = lastZ = ;

function deviceMotionHandler(eventData){

var acceleration = event.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 ){

//这里是摇动后要执行的方法

yaoAfter();

    }
lastX = x;
lastY = y;
lastZ = z;

}

function yaoAfter(){

//do something

}