关于前端:jsliang-求职系列-40-CSS-移动端

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

目录
一目录
二前言
三挪动端应用的单位
四挪动端布局总结
五 1px 实现
六 300ms 点击提早
6.1 jsliang 论述
6.2 浏览器开发商解决方案
6.3 JavaScript 解决方案
七参考文献

对于挪动端的一些问题。

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

应用 rem 单位。能够拷贝淘宝那份代码间接应用，简略来说就是定义 1rem = 16px，而后配合 meta 应用。
通过 position: relative/absolute 布局（当初更举荐应用 Flex 布局）

以上为集体教训，更多的没接触过，欢送补充。

产生的起因：

根本原因是 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;}

历史起因：

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

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

300ms 是因为首款苹果做了个双击放大的成果，为了能看到用户到底是心愿单击还是双击，所以有个 300ms 的期待，让手机晓得用户想做啥。

一开始还没啥，当初网速越来越快、手机性能越来越好，这个弊病就裸露了。

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

然而比拟无效的是 FastClick，它利用的原理是在 touchend 中绑定自定义 click 事件，触发该事件后间接阻止 300ms 后的 click 事件。

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

new Event
new CustomEvent
document.createEvent('CustomEvent')

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

办法一：禁止缩放

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

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

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

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

总结

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

办法一：指针事件的 polyfill

除了 IE，其余大部分浏览器都还不反对指针事件。有一些 JS 库，能够让咱们提前应用指针事件。比方：

谷歌的 Polymer
微软的 HandJS
@Rich-Harris 的 Points

办法二：FastClick

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

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

[x] Mars – mobile needs a hero【浏览倡议：无】
[x] 腾讯挪动 Web 前端知识库【浏览倡议：无】
[x] 对于挪动端适配，你必须要晓得的【浏览倡议：30min】
[x] 如何解决挪动端 Click 事件 300ms 提早的问题？【浏览倡议：20min】
[x] 设计方案 – 挪动端提早 300ms 的起因以及解决方案【浏览倡议：20min】
[x] 细说挪动端经典的 REM 布局与新秀 VW 布局【浏览倡议：30min】
[x] 挪动端 1px 解决方案【浏览倡议：30min】
[x] Retina 屏的挪动设施如何实现真正 1px 的线？【浏览倡议：20min】
[x] rem 布局解析【浏览倡议：5min】

一 目录

二 前言

三 挪动端应用的单位

四 挪动端布局总结

五 1px 实现

六 300ms 点击提早

6.1 jsliang 论述

6.2 浏览器开发商解决方案

6.3 JavaScript 解决方案

七 参考文献

一目录

二前言

三挪动端应用的单位

四挪动端布局总结

七参考文献