设为首页 - 加入收藏 汉中ag棋牌官网|官方网站 (http://www.0916zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 发布 华为 手机 数据
当前位置: 首页 > ag游戏官方网|官方 > 评论 > 正文

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

发布时间:2019-10-30 12:45 所属栏目:[评论] 来源:_Dreamslv
导读:前言 在平时的H5移动端开发时,我们难免会遇到各种各样的坑点,这篇文章就带着大家来看看怎么解决,文章较长,建议收藏方便以后查阅! 前方高能! canvas在retina屏模糊 只需要将画笔根据像素比缩放即可 run(canvasEl){ constcanvas=canvasEl; constctx=canv

前言

在平时的H5移动端开发时,我们难免会遇到各种各样的坑点,这篇文章就带着大家来看看怎么解决,文章较长,建议收藏方便以后查阅!

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

前方高能!

canvas在retina屏模糊

只需要将画笔根据像素比缩放即可

  1. run(canvasEl)?{?
  2. ????const?canvas?=?canvasEl;?
  3. ????const?ctx?=?canvas.getContext('2d');?
  4. ????const?devicePixelRatio?=?window.devicePixelRatio?||?1;?
  5. ????const?backingStorePixelRatio?=?ctx.webkitBackingStorePixelRatio?||?
  6. ????ctx.mozBackingStorePixelRatio?||?
  7. ????ctx.msBackingStorePixelRatio?||?
  8. ????ctx.oBackingStorePixelRatio?||?
  9. ????ctx.backingStorePixelRatio?||?1;?
  10. ?
  11. ????const?ratio?=?devicePixelRatio?/?backingStorePixelRatio;?
  12. ????if?(devicePixelRatio?!==?backingStorePixelRatio)?{?
  13. ??????const?oldWidth?=?canvas.width;?
  14. ??????const?oldHeight?=?canvas.height;?
  15. ?
  16. ??????canvas.width?=?oldWidth?*?ratio;?
  17. ??????canvas.height?=?oldHeight?*?ratio;?
  18. ?
  19. ??????canvas.style.width?=?`${oldWidth}px`;?
  20. ??????canvas.style.height?=?`${oldHeight}px`;?
  21. ??????ctx.scale(ratio,?ratio);?
  22. ????}?
  23. ??},?

用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?

ag游戏官方网|官方经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone 4的960640分辨率在网页里只显示了480320,这样devicePixelRatio=2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用2x的背景图来代替img标签(一般情况都是用2倍),例如一个div的宽高是100100,背景图必须得200200,然后background-size:contain;,这样显示出来的图片就比较清晰了;代码如下:

  1. background:url(../images/icon/all.png)?no-repeat?center?center;?
  2. ?-webkit-background-size:50px?50px;?
  3. ?background-size:?50px?50px;?
  4. ?display:inline-block;??
  5. ?width:100%;??
  6. ?height:50px;?

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

  1. ??

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

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

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

问题1:maxlength属性不好用

  1. ?
  2. ?
  3. ????function?checkTextLength(obj,?length)?{?
  4. ????????if(obj.value.length?>?length)??{?
  5. ????????????obj.value?=?obj.value.substr(0,?length);?
  6. ????????}?
  7. ????}?
  8. ?

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

  1. ?//input中type=number一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step;number中默认step是1,也就是step=0.01可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01;step和min一起使用时数值必须在min和max之间?

问题3:部分安卓手机出现样式问题

去除input默认样式的方法:

  1. input,textarea?{?
  2. ????border:?0;?
  3. ????-webkit-appearance:?none;?//可同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现,加了此属性后,iOS下默认还是有圆角的,不过可以用border-radius属性修改?
  4. }?

select下拉选择设置问题

问题1:右对齐实现

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章