jsliang 求职系列 - 40 - CSS 移动端

一 目录

不折腾的前端，和咸鱼有什么区别

二 前言

关于移动端的一些问题。

三 移动端使用的单位

• em：定义字体大小时以父级的字体大小为基准；定义长度单位时以当前字体大小为基准。
• rem：以根元素的字体大小为基准。
• %：以父级的宽度为基准。
• vw/vh：基于视口的宽度和高度。

四 移动端布局总结

1. 使用 rem 单位。可以拷贝淘宝那份代码直接使用，简单来说就是定义 1rem = 16px，然后配合 meta 使用。
2. 通过 position: relative/absolute 布局（现在更推荐使用 Flex 布局）

以上为个人经验，更多的没接触过，欢迎补充。

五 1px 实现

产生的原因：

根本原因是 750px 的设计稿上是 UI 设计师期待的 1px 物理像素，它对应实际 375px 稿子上的 0.5px 设备独立像素。

而 0.5px 设备独立像素对于 IOS-8 支持，对于安卓不支持。

所以安卓会将 0.5px 的设备独立像素渲染成 1px 的设备独立像素，也就是说，安卓在 375px 稿子上的设备独立像素为 1px 时，占 2px 物理像素，更粗。

所以我们拿到设计稿，要按照像素比 dpr 换算，每次量的单位 = 单位 / dpr，比如 dpr 为 2 的时候，1px 转换为 CSS 以后就是 0.5px。（我们看的页面效果是按以物理像素来说，这才是问题的关键）

方法一：利用 ::after + transform

div::after {
  display: block;
  content: '';
  border: 1px solid #ccc;
  transform: scaleY(0.5);
}

方法二：利用 box-shadow

div: {
  box-shadow: 0 0.5px 0 0 #fff;
}

六 300ms 点击延迟

历史原因：

首款 iPhone 发布的时候，因为手机不知道用户点击一次屏幕，是点击按钮链接，还是要进行双击缩放。

所以 IOS Safari 就等待 300ms 来判断用户需要哪个操作（单击还是双击），然后产品一把抄，其他手机也逐渐变成这样了。

6.1 jsliang 阐述

300ms 是由于首款苹果做了个双击放大的效果，为了能看到用户到底是希望单击还是双击，所以有个 300ms 的等待，让手机知道用户想做啥。

一开始还没啥，现在网速越来越快、手机性能越来越好，这个弊端就暴露了。

网上有很多解决方案，说的较多的是浏览器厂商提供 viewport 的设置，还有 pollfill。

但是比较有效的是 FastClick，它利用的原理是在 touchend 中绑定自定义 click 事件，触发该事件后直接阻止 300ms 后的 click 事件。

实现自定义事件有 3 种方法：

1. new Event
2. new CustomEvent
3. document.createEvent('CustomEvent')

然后通过给按钮绑定 addEventListener(eventName, callback) 来实现。

6.2 浏览器开发商解决方案

• 方法一：禁止缩放

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

缺陷：并不能很好解决问题，用户想看图片这些没法双击放大看了。

• 方法二：更改默认的视口宽度

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

• 总结

对于方案一和方案二，Chrome 是率先支持的，Firefox 紧随其后，然而 Safari 令人头疼的是，它除了双击缩放还有双击滚动操作，如果采用这种两种方案，那势必连双击滚动也要一起禁用；

6.3 JavaScript 解决方案

• 方法一：指针事件的 polyfill

除了IE，其他大部分浏览器都还不支持指针事件。有一些JS库，可以让我们提前使用指针事件。比如：

1. 谷歌的Polymer
2. 微软的HandJS
3. @Rich-Harris 的 Points

• 方法二：FastClick

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。

实现原理是检测到 touchend 事件的时候，通过 DOM 自定义事件模拟一个 click 事件，并把浏览器 300ms 之后的 click 阻止掉。

七 参考文献

• Mars - mobile needs a hero【阅读建议：无】
• 腾讯移动Web前端知识库【阅读建议：无】
• 关于移动端适配，你必须要知道的【阅读建议：30min】
• 如何解决移动端Click事件300ms延迟的问题？【阅读建议：20min】
• 设计方案--移动端延迟300ms的原因以及解决方案【阅读建议：20min】
• 细说移动端 经典的REM布局 与 新秀VW布局【阅读建议：30min】
• 移动端1px解决方案【阅读建议：30min】
• Retina屏的移动设备如何实现真正1px的线？【阅读建议：20min】
• rem布局解析【阅读建议：5min】