移动端H5页面开发坑点指南

前言

在平时的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; 

启动或禁用自动识别页面中的电话号码;

<meta name="format-detection" content="telephone=no">  

默认情况下设备会自动识别任何可能是电话号码的字符串,设置telephone=no可以禁用这项功能,设置不识别邮箱和地址也同理

h5网站input设置为type=number的问题

h5网页input的type设置为number一般会产生三个问题:

问题1:maxlength属性不好用

<input type="number" oninput="checkTextLength(this ,10)"> 
<script type="text/javascript"> 
    function checkTextLength(obj, length) { 
        if(obj.value.length > length)  { 
            obj.value = obj.value.substr(0, length); 
        } 
    } 
</script> 

问题2:form提交的时候默认取整

<input type="number" step="0.01" /> //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:右对齐实现

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!