这篇文章给大家介绍移动端H5页面开发坑点有哪些，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
成都创新互联公司成立于2013年，先为高坪等服务建站，高坪等地企业，进行企业商务咨询服务。为高坪企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
前言
在平时的H5移动端开发时，我们难免会遇到各种各样的坑点，这篇文章就带着大家来看看怎么解决，文章较长，建议收藏方便以后查阅!
前方高能!
canvas在retina屏模糊
只需要将画笔根据像素比缩放即可
run(canvasEl) { const canvas = canvasEl; const ctx = canvas.getContext('2d'); const devicePixelRatio = window.devicePixelRatio || 1; const backingStorePixelRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; const ratio = devicePixelRatio / backingStorePixelRatio; if (devicePixelRatio !== backingStorePixelRatio) { const oldWidth = canvas.width; const oldHeight = canvas.height; canvas.width = oldWidth * ratio; canvas.height = oldHeight * ratio; canvas.style.width = `${oldWidth}px`; canvas.style.height = `${oldHeight}px`; ctx.scale(ratio, ratio); } },用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?
经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone 4的960640分辨率在网页里只显示了480320,这样devicePixelRatio=2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用2x的背景图来代替img标签(一般情况都是用2倍),例如一个div的宽高是100100,背景图必须得200200,然后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%; height:50px;
启动或禁用自动识别页面中的电话号码;
默认情况下设备会自动识别任何可能是电话号码的字符串,设置telephone=no可以禁用这项功能,设置不识别邮箱和地址也同理
h6网站input设置为type=number的问题
h6网页input的type设置为number一般会产生三个问题:
问题1:maxlength属性不好用
function checkTextLength(obj, length) { if(obj.value.length > length) { obj.value = obj.value.substr(0, length); } }
问题2:form提交的时候默认取整
//input中type=number一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step;number中默认step是1,也就是step=0.01可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01;step和min一起使用时数值必须在min和max之间
问题3:部分安卓手机出现样式问题
去除input默认样式的方法:
input,textarea { border: 0; -webkit-appearance: none; //可同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现,加了此属性后,iOS下默认还是有圆角的,不过可以用border-radius属性修改 }select下拉选择设置问题
问题1:右对齐实现
设置如下属性
select option { direction: rtl; }问题2:禁用select默认箭头
::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰 select::-ms-expand { display:none; }移动端HTML5 audio autoplay失效问题
由于自动播放网页中的音频或视频会给用户带来困扰或不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用JS的触发播放,必须由用户来触发才播放;解决方法思路:先通过用户touchstart触碰触发播放并暂停(让音频开始加载),后面用JS再操作就没问题了;解决代码:
document.addEventListener('touchstart', function () { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); });CSS动画页面闪白,动画卡顿,图片错乱的问题
尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位
开启硬件加速
-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
浮动子元素撑开父元素盒子高度(BFC)
解决方法如下：
父元素设置为 overflow: hidden;
父元素设置为 display: inline-block;等
这里两种方法都是通过设置css属性将浮动元素的父元素变成BFC(块级格式化上下文)元素,使子元素高度可以撑开父元素;不过最好使用方法1,因为inline-block元素本身会自带一些宽高度撑开其本身
往返缓存问题
点击浏览器的回退有时候不会自动执行js,特别是在mobilesafari中;这与往返缓存(bfcache)有关系,解决方法:
window.onunload = function(){};定位的坑
在IOS下fixed定位在软键盘顶起时会失效，所以我们在开发时统一使用absolute代替
audio元素和video元素在ios和andriod中播放问题
你的浏览器还不支持哦 //音频,写法一 //音频,写法二 //优先播放音乐bg.ogg,不支持在播放bg.mp3
ios系统手机无法自动播放音频/视频
这个是苹果系统限制默认不允许自动播放音频/视频,需要点一下触发play()事件才能播放;那么我们可以在页面onload后触发播放事件:
document.getElementById('music').play();到这里一般都可以播放音乐了,如果还不行很有可能是微信的限制
问题3:微信的限制
如果是微信的限制,这时需要调用微信接口,页面先引入:
然后JS写入微信事件:
document.addEventListener("WeixinJSBridgeReady", function() { document.getElementById('music').play(); }, false);小结:
audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常
audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间
问题4:Safari浏览器自动播放
document.addEventListener('touchstart', function(){ audio.play(); }, false);ios系统不支持动画暂停样式(animation-play-state)
H5页面一般都会有BGM,也会提供一个旋转的音乐图标供用户开启关闭音乐;我们希望当用户点击音乐按钮时图标停止旋转,再点图标顺着之前停止的位置继续跑动画;animation-play-state是最简便的方式,然而ios不支持
目前的解决方案是:音乐图标负责跑动画,图标父级元素负责记录停止时的转动值
ios防止长按页面元素被选中
解决:加入样式可禁止用户进行复制,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;
添加完这段代码后在IOS上会有问题,这时发现input框无法正在输入内容了;造成这个原因是-webkit-user-select:none;这个属性,解决方法就是在css文件中同时设置一下input的属性,如下:
input { -webkit-user-select:auto; //webkit浏览器 }html5碰到上下拉动滚动条时卡顿/慢怎么解决
首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。
解决方案是： 1.让html和body固定100%(或者100vh)， 2.然后再在内部放一个height:100%的div，设置overflow-y: auto;和-webkit-overflow-scrolling: touch;
.scroll-box { /* 模态框之类的div不能放在这个容器中,否则关闭模态框有时候关闭不了 */ height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }点击元素产生背景或边框怎么去掉
a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符 } 或 a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); }浏览器后退不刷新
这种情况是以前遇到的,这里也说下;主要会发生在webview里多一点,当点击后退时页面以缓存形式出现,而不是刷新后的,很多情况下这不是你预期的效果,解决方法是用js:
window.onpageshow = function(evt){ if(evt.persisted){ document.body.style.display ="none"; location.reload(); } };onpageshow每次页面加载都会触发,无论是从缓存中加载还是正常加载,这是他和onload的区别;persisted判断页面是否从缓存中读出
input的placeholder文本位置偏上的情况
input的placeholder会出现文本位置偏上的情况:PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决方案时是设置css line-height:normal;
transition清除闪屏
-webkit-transform-style: preserve-3d; //设置内嵌的元素在 3D 空间如何呈现：保留3D -webkit-backface-visibility:hidden; //设置进行转换的元素的背面在面对用户时是否可见：隐藏 -webkit-perspective: 1000;
解决active伪类失效
