移动端web

[HolyZheng]

像素和视口

riskers同学的移动端适配方案上 riskers同学的移动端适配方案下

像素

1. 设备像素pt（物理像素）
2. css像素px（设备独立像素）
3. 设备像素比（device pixel ratio）dpr = 设备像素 / CSS像素 window.devicePixelRatio

   视口

4. 布局视口 document.documentElement.clientWidth/Height
5. 视觉视口 window.innerWidth/Height
6. 理想视口，它是对设备来说最理想的布局视口尺寸 <meta name="viewport" content="width=device-width">
7. 完美视口 <meta name="viewport" content="width=device-width,initial-scale=1">

click事件300ms延迟

原因

移动端，click点击事件会有300ms的延迟，造成这种延迟的原因在于：当用户点一次点击屏幕之后，浏览器并不能立即判断用户是要进行双击缩放，还是进行单击操作，所以会等待300ms来查看用户是否再次点击。

解决方案

1. 禁用缩放，安卓上的Chrome32+会禁用300ms延迟

   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

2. 将视窗宽度设为设备宽度，安卓上的chrome浏览器会禁用300ms延迟

   <meta name="viewport" content="width=device-width">

3. css 的 touch-action属性禁用双击缩放，IE浏览器

   . xx {
   touch-action: none
   }

4. fastClick.js库，它的原理：修改浏览器的touch事件来模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。，让前端开发人员以熟悉的click来书写代码

   if ('addEventListener' in document) {
   document.addEventListener('DOMContentLoaded', function() {
       FastClick.attach(document.body);
   }, false);
   }

   点透事件

   出现条件

   • touchstart 和 click 事件混用。
   • touchstart触发后，消失掉，300ms之后的click事件在相同位置的底层元素上被触发。

解决方案

1. 不要touchstart 和 click 混用
2. 让绑定了touchstart事件的元素延迟隐藏。
3. fastclick.js，解决300ms的延迟的同时，阻止300ms后发出的click事件。