Open HolyZheng opened 6 years ago
riskers同学的移动端适配方案上 riskers同学的移动端适配方案下
dpr = 设备像素 / CSS像素 window.devicePixelRatio
document.documentElement.clientWidth/Height
window.innerWidth/Height
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width,initial-scale=1">
移动端,click点击事件会有300ms的延迟,造成这种延迟的原因在于:当用户点一次点击屏幕之后,浏览器并不能立即判断用户是要进行双击缩放,还是进行单击操作,所以会等待300ms来查看用户是否再次点击。
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
. xx { touch-action: none }
if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); }
像素和视口
riskers同学的移动端适配方案上 riskers同学的移动端适配方案下
像素
dpr = 设备像素 / CSS像素 window.devicePixelRatio
视口
document.documentElement.clientWidth/Height
window.innerWidth/Height
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width,initial-scale=1">
click事件300ms延迟
原因
移动端,click点击事件会有300ms的延迟,造成这种延迟的原因在于:当用户点一次点击屏幕之后,浏览器并不能立即判断用户是要进行双击缩放,还是进行单击操作,所以会等待300ms来查看用户是否再次点击。
解决方案
点透事件
出现条件
解决方案