前言在平时的H5移动端开发中，我们难免会遇到各种陷阱。本文就带大家看看如何解决。文章较长，建议保存以备日后参考！前方高能！canvas在retina屏幕上是模糊的，只需要根据像素比例缩放画笔即可。||1;constbackingStorePixelRatio=ctx.webkitBackingStorePixelRatio||ctx.mozBackingStorePixelRatio||ctx.msBackingStorePixelRatio||ctx.oBackingStorePixelRatio||ctx.backingStorePixelRatio||1;constratio=devicePixelRatio/backingStorePixelRatio;if(devicePixelRatio!==backingStorePixelRatio){constoldWidth=canvas.width;constoldHeight=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出问题了，因为手机的分辨率太小了，如果网页按照分辨率显示，文字会很小，所以苹果在网页上只显示480320iPhone4的分辨率为960640，因此devicePixelRatio=2；现在android比较乱，有1.5/2/3等，如果想让图片在手机上显示的更清楚，就必须使用2x的背景图，而不是img标签（一般是2倍），比如，如果一个div的宽高是100100，背景图片必须是获取200200，然后background-size:contain;，这样显示的图片会更清晰；代码如下：background:url(../images/icon/all.png)no-repeatcentercenter;-webkit-background-size:50px50px;background-size:50px50px;display:inline-block;width:100%;height:50px;开启或关闭页面自动识别电话号码;默认情况下，设备会自动识别任何可能是电话号码的字符串.设置telephone=no以禁用此功能。该设置不识别电子邮件地址和地址。问题是h5网站输入设置为type=number。h5网页input的type设置为number一般会产生三个问题：问题一：maxlength属性不好用问题2：当表单是提交，默认四舍五入//input中的type=number一般会自动生成上下箭头，点击向上箭头默认增加一个步长，点击向下箭头默认减少一步；number默认步长为1，即step=0.01允许输入2位小数，点击上下箭头分别增加0.01和减少0.01；step和min一起使用时，值必须在min和max之间问题3：部分Android手机有样式问题如何去除默认输入样式:input,textarea{border:0;-webkit-appearance:none;//同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式的问题。测试也发现添加这个属性后，iOS下默认还是有圆角的，但是可以使用border-radius属性修改}select下拉选择设置问题问题一：右对齐实现设置如下属性selectoption{direction:rtl;}问题2：禁用默认selectarrow::-ms-expand修改formControl下拉箭头，设置隐藏并使用背景图装饰select::-ms-expand{display:none;}移动端HTML5音频自动播放失败问题由于网页中的音频或视频是自动播放的，会给用户带来麻烦或不必要的，所以苹果系统和安卓系统通常禁止自动播放，使用JS触发播放，必须由用户触发播放；解决思路：先触摸用户的touchstart触发播放暂停（让音频开始加载），后面用JS操作就没问题了；解决代码：document.addElementsByTagName('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；父元素设置为显示：inline-block；etc.这里的两个方法是设置css属性浮动元素的父元素变成BFC（块级格式化上下文）元素，这样就可以扩展子元素的高度父元素；但是最好使用方法一，因为inline-block元素本身会有一些宽高开辟自己的往返缓存问题。点击浏览器的fallback有时不会自动执行js，尤其是在mobilesafari中；这个和往返缓存（bfcache）有关，解决办法：window.onunload=function(){};固定定位在软键盘顶部时定位坑在IOS下会失效，所以我们在开发时统一使用absolute而不是audio元素在ios和andriod中播放video元素的问题你的浏览器还不支持//Audio,怎么写//Audio,Writing2//优先播放音乐bg.ogg，不支持播放bg.mp3ios系统手机无法自动播放音视频这是苹果系统限制，默认不允许自动播放音视频，需要点击触发play()事件才能播放；那么我们可以在之后触发播放事件页面已加载：document.getElementById('music').play();平时可以在这里播放音乐，如果不行，可能是微信的限制如果是微信的限制，这时候需要调用微信的接口，页面首先介绍：然后JS写微信事件：document.addEventListener("WeixinJSBridgeReady",function(){document.getElementById('mu原文如此').play();},假);总结：audio元素的autoplay属性不能在IOS和Android上使用。当PC端普通音频元素没有设置控件时，在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;//webkitbrowser-khtml-user-select:none;//早期的browser-moz-user-select:none;//Firefox-ms-user-select:none;//IE10user-select:none;添加完这段代码后，在IOS上就会出现问题。这时发现输入框无法输入；这样做的原因是-webkit-user-select:none;这个属性，解决方法是在css文件中同时设置input属性如下：input{-webkit-user-select:auto;//webkitbrowser}如何解决卡住/慢的问题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会有更高的文本位置：设置line-height等于PC端的高度可以对齐，但是移动端还是偏上的。解决方法是设置cssline-height:normal;transitiontocleartheflashScreen-webkit-transform-style:preserve-3d;//设置内嵌元素为3Dhowtopresentthespace:keep3D-webkit-backface-visibility:hidden;//设置转换后的元素背面在面向用户时是否可见：hidden-webkit-perspective:1000;解决active伪类
