[HTML] H5在webApp中的注意事项

幼敏悟过人，读书辄成诵。这篇文章主要讲述[HTML] H5在webApp中的注意事项相关的知识，希望能为你提供帮助。
常用的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标签

< !-- 启用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">

如果用的rem。为了完全自适应，通常会拿js先控制，然后再用rem，代码如下：

//动态设置页面的像素比，达到一比一还原设计稿 var iScale=1; 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")[0].style.fontSize = iWidth/10+"px";

比如720的设计图纸，h2字体大小36px，宽度400px，那么可以这样写：

h2{ font-size: 36/72rem; width: 400/72rem; }

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

//JS判断设备 function deviceType(){ var ua = navigator.userAgent; var agent = ["android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; for(var i=0; i< len,len = agent.length; i++){ if(ua.indexOf(agent[i])> 0){ 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‘) > -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(‘Linux‘) > -1, //android终端或uc浏览器 iPhone: u.indexOf(‘iPhone‘) > -1, //是否为iPhone或者QQHD浏览器 iPad: u.indexOf(‘iPad‘) > -1, //是否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‘:0}, function(res){ alert(JSON.stringify(res)); }) }, 0) }); }else{ setTimeout(function(){ WeixinJSBridge.invoke(‘setFontSizeCallback‘, { ‘fontSize‘:0}, function(res){ alert(JSON.stringify(res)); }) }, 0) } //IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小 body { -webkit-text-size-adjust:100%!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="https://www.songbingjia.com/android/music/bg.mp3" autoplay loop controls> 你的浏览器还不支持哦< /audio> < !--音频，写法二--> < audio controls="controls"> < source src="https://www.songbingjia.com/android/music/bg.ogg" type="audio/ogg"> < source src="https://www.songbingjia.com/android/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‘)[0].play(); document.getElementsByTagName(‘audio‘)[0].pause(); }); < /script>

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

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

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

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

【[HTML] H5在webApp中的注意事项】6：关于 iOS 端字体的优化(横竖屏会出现字体加粗不一致等)

-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%;

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

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

8：重感力事件：

// 运用HTML5的deviceMotion，调用重力感应事件 if(window.DeviceMotionEvent){ document.addEventListener(‘devicemotion‘, deviceMotionHandler, false) }var speed = 30; var x = y = z = lastX = lastY = lastZ = 0; 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 }

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

{background-clip: padding-box; }

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

this.value = https://www.songbingjia.com/android/this.value.replace(/u2006/g, ‘‘);

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

< !--一、打电话--> < a href="https://www.songbingjia.com/android/tel:0755-10086"> 打电话给:0755-10086< /a> < !--二、发短信，winphone系统无效--> < a href="https://www.songbingjia.com/android/sms:10086"> 发短信给: 10086< /a> < !--三、写邮件注：在添加这些功能时，第一个功能以"?"开头，后面的以"& "开头 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=< img src=‘images/1.jpg‘ /> "> 点击我发邮件< /a> < !--9.完整示例--> < a href="mailto:[email protected]; [email protected][email protected]& [email protected]& 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; }