|
前言 在平时的H5移动端开发时，我们难免会遇到各种各样的坑点，这篇文章就带着大家来看看怎么解决，文章较长，建议收藏方便以后查阅！ 前方高能！ 视频兼容相关 在安卓中，直接使用原生 video 会导致全屏播放，盖住所有元素，因此使用 x5 播放器。但是 x5 播放器还是存在问题，虽然不会盖住元素，但是会自己添加特效（盖一层导航栏蒙层）。 这样可以在安卓下使用 x5 播放器， playsInline 及 webkit-playsinline 属性可以在 iOS 环境下启用内联播放。但是通过属性设置内联播放兼容性并不怎么好，所以这时候我们需要使用 iphone-inline-video 这个库，通过 enableInlineVideo(video) 就可以了。 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可以禁用这项功能,设置不识别邮箱和地址也同理 h5网站input设置为type=number的问题 h5网页input的type设置为number一般会产生三个问题: 问题1:maxlength属性不好用 |
|
|
