移动端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:右对齐实现

（编辑：河北网）

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