h5项目常见问题与解决方案（一）

2017-5-16 hanbin Web前端

1.meta基础知识：

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

//一、HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数 // maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数 // user-scalable 是否允许手动缩放 //二、JS动态判断 var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)){ var version = parseFloat(RegExp.$1); if(version>2.3){ document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">'); }else{ document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); } } else { document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); }

2.移动端如何定义字体font-family。

@ --------------------------------------中文字体的英文名称 @ 宋体 SimSun @ 黑体 SimHei @ 微信雅黑 Microsoft Yahei @ 微软正黑体 Microsoft JhengHei @ 新宋体 NSimSun @ 新细明体 MingLiU @ 细明体 MingLiU @ 标楷体 DFKai-SB @ 仿宋 FangSong @ 楷体 KaiTi @ 仿宋_GB2312 FangSong_GB2312 @ 楷体_GB2312 KaiTi_GB2312 @ @ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica body { font-family: Microsoft Yahei,SimSun,Helvetica; }

3.打电话，发短信，写邮件怎么实现。

// 一、打电话 <a href="tel:0755-10086">打电话给:0755-10086</a> // 二、发短信，winphone系统无效 <a href="sms:10086">发短信给: 10086</a> // 三、写邮件 //注：在添加这些功能时，第一个功能以"?"开头，后面的以"&"开头 //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=<img src='images/1.jpg' />">点击我发邮件</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<img src='images/1.jpg' />">点击我发邮件</a>

4.移动端touch事件。

/* 当用户手指放在移动设备在屏幕上滑动会触发的touch事件 */ // 以下支持webkit touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指 touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动 touchend——当手指离开屏幕时触发 touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用 //TouchEvent说明： touches：屏幕上所有手指的信息 targetTouches：手指在目标区域的手指信息 changedTouches：最近一次触发该事件的手指信息 touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息 //参数信息(changedTouches[0]) clientX、clientY在显示区的坐标 target：当前元素 //事件响应顺序 ontouchstart > ontouchmove > ontouchend > onclick // 以下支持winphone 8 MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指 MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动 MSPointerUp——当手指离开屏幕时触发

5.移动端click屏幕产生200-300ms延迟。

说明：移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。以下是历史原因，来源一个公司内一个同事的分享： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。 //解决方案： fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块，tap事件也是为了解决在click的延迟问题

6.移动端字体单位font-size选择px还是rem。

// 如需适配多种移动设备，建议使用rem。以下为参考值： html { font-size: 62.5%; } //10*16 = 62.5% //设置12px字体这里注意在rem前要加上对应的px值，解决不支持rem的浏览器的兼容问题，做到优雅降级 body { font-size:12px; font-size:1.2rem; }

7.手机拍照上传图片。

//IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能。Winphone不支持 <input type="file" accept="images/*" /> <input type="file" accept="video/*" />

8.屏幕旋转事件。

//JS处理 function orientInit(){ var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait'; if(orientChk =='lapdscape'){ //这里是横屏下需要执行的事件 }else{ //这里是竖屏下需要执行的事件 } } orientInit(); window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){ setTimeout(orientInit, 100); },false) //CSS处理 //竖屏时样式 @media all and (orientation:portrait){ } //横屏时样式 @media all and (orientation:landscape){ }

9.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> <source src="music/bg.mp3" type="audio/mpeg"></source> 优先播放音乐bg.ogg，不支持在播放bg.mp3 </audio> //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是不会占据任何空间

10.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;
        }
    }
}
deviceType();
window.addEventListener('resize', function(){
    deviceType();
})

分享到： QQ空间新浪微博腾讯微博微信更多

标签: html5

« 登录按键的动态效果的封装和实现 | 反转一个英文句子中的单词，并且对应位置大小写不改变»

h5项目常见问题与解决方案（一）

日历

存档

最新评论

链接

搜索