让每一名学员高薪就业
返回列表 发新帖

H5移动端网页开发过程中遇到的各种跳坑指南

[复制链接]

57

主题

320

帖子

2191

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2191

版主论坛荣誉内测

发表于 2018-5-8 14:44:13  | 显示全部楼层 | 阅读模式

现在的H5前端开发者基本都要同时进行PC端页面和手机端页面的开发工作,就目前的状况来看,手机页面的兼容性要比PC端更为复杂,更加明显的就是在Android端,而且有些样式在PC端页面上可能显示的很正常,但是一旦到了手机页面,那就有可能是不可预料的“大坑”,下面是开发手机页面过程中总结的一些问题以及跳坑指南。

1. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?
经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone960*640分辨率在网页里只显示了480*320,这样devicePixelRatio2;现在android比较乱,1.5/2/3,想让图片在手机里显示更为清晰必须使用2x的背景图来代替img标签(一般情况都是用2),例如一个div的宽高是100*100,背景图必须得200*200,然后background-size:contain;,这样显示出来的图片就比较清晰了;代码如下:
background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;
display:inline-block;
width:100%;
2. 防止手机中网页放大和缩小
这点是手机站开发者都应该知道的,就是设置meta中的viewport;有些手机站有如下声明:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
3. 如何设置Web应用以全屏模式运行
apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行,语法:
<meta name="apple-mobile-web-app-capable" content="yes">
4. 移动端click事件延迟的问题
移动端的点击事件都会有300ms延迟,是因为浏览器在等待你是否执行双击,但此延迟导致用户体验不好,解决这个问题的方案如下:
1.尽量都使用touch事件来替换click事件,例如用touchend事件(推荐)
2.preventDefault阻止a标签的click
3.script标签引入fastclick库去除延迟,实验证明fastclicktap要快
4.zeptotouch模块,tap事件也是可以解决在click的延迟问题
5.延迟一定的时间(300ms+)来处理事件(不推荐)
6.以上一般都能解决,实在不行就换成click事件
7.触摸事件的响应顺序为touchstart-->touchmove-->touchend-->click,也可以通过绑定ontouchstart事件,加快对事件的响应,解决300ms延迟问题
8.若移动设备兼容性正常的话(IE/Firefox/Safari(IOS 9.3)及以上)只需加上下面meta标签即可把viewport设置成设备的实际像素,就不会有300ms的延迟。
$('#haorooms').on('tap',function(){
    $('#haorooms').hide();
});
5. 移动端HTML5 audio autoplay失效问题
由于自动播放网页中的音频或视频会给用户带来困扰或不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用JS的触发播放,必须由用户来触发才播放;解决方法思路:先通过用户touchstart触碰触发播放并暂停(让音频开始加载),后面用JS再操作就没问题了,解决代码:
document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});
6. CSS动画页面闪白,动画卡顿,图片错乱的问题
解决方法:
1.尽可能地使用合成属性transformopacity来设计CSS3动画,不使用positionlefttop来定位
2.开启硬件加速
目前像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速,当检测到某个DOM元素应用了某些CSS规则时就会自动开启,从而解决页面闪白,保证动画流畅
3.各种应用的webview(例如微信)在遇到有大量图片时会出现imgbackground-image互相错乱的情况,66plus更为严重,目前暂时的解决方法也是动态给所有用到图片的元素加上-webkit-transform:translate3d(0,0,0)
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); //可以触发硬件加速,从而让浏览器在渲染动画时从CPU转向GPU
7. 防止长按页面元素被选中
加入样式可禁止用户进行复制,ios和一般的安卓都可以解决,唯独小米自带浏览器还有问题:
-webkit-touch-callout:none;  //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口
-webkit-user-select:none; //webkit浏览器  
-khtml-user-select:none; //早期浏览器
-moz-user-select:none; //火狐
-ms-user-select:none; //IE10
user-select:none;
8. 微信二维码问题
1.同一个页面里要是有两个二维码,长按扫描总是只能扫出左侧/第一个二维码
解决:可视区域内只能出现一个二维码
2.使用meta标签缩放页面后长按二维码图片无反应
解决:使用以下代码后就能长按识别二维码了~
二维码图片不要写为背景,不然长按没办法触发扫描功能,应使用img标签引入;有时扫描二维码后会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,App的下载页面等,因此二维码的扫描测试不能少;举例:如果二维码扫描结果是应用的下载地址的,可以使用应用宝的微下载地址生成二维码
//同一张二维码图片
<img style="right:0; top:0; height: auto;width: 100%;opacity: 0;position: absolute;" src="二维码图片地址"> //这张opacity0隐藏起来,但实际存在且宽为100%,屏幕有多大就多大
//这张是呈现给用户看的
<img src="二维码图片地址" title="qrcode" alt="qrcode">
9. overflow-x的溢出问题
这真的是一个大坑,一旦你在body或者html上用了这个属性,你的页面出现滚动条的话,那就会出现莫名其妙的bug,解决办法:htmlbody不要使用这个属性,如果不想让横向出现滚动:
overflow:hidden;overflow-y:auto;
10. window phone上去除点击事的高亮
你在Windows Phone上的IE10IE11tap某元素时,会有一个小小的tap高亮效果,加上这个meta标签可以取消这种效果:
<meta name="msapplication-tap-highlight" content="no" />
11. 唤起selectoption展开
function showDropdown(sltElement) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
sltElement.dispatchEvent(event);
};
12. 判断设备类型是android还是iosios移动端头部底部fixed定位,输入框收回闪屏问题
你在Windows Phone上的IE10IE11tap某元素时,会有一个小小的tap高亮效果,加上这个meta标签可以取消这种效果:
<script type="text/javascript">
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
//android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
//ios终端
alert('是否是Android'+isAndroid);
alert('是否是iOS'+isiOS);</script>

//只需要在中间部分外层div添加css样式
position:fixed;
top:50px;
bottom:50px;
overflow:scroll;


  感谢源码时代教学讲师提供此文章!
  本文为原创文章,转载请注明出处!

“尔康,你现在幸福吗?”“紫薇,你忘了?我一直就姓福啊。”
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

最新活动

联系我们

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表