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

时间 2021-04-24

标签 css html 前端 git github web 浏览器布局 post 性能栏目 CSS 繁體版

原文原文链接

一目录

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

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

二前言

关于移动端的一些问题。html

三移动端使用的单位

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

四移动端布局总结

使用 rem 单位。能够拷贝淘宝那份代码直接使用，简单来讲就是定义 1rem = 16px，而后配合 meta 使用。
经过 position: relative/absolute 布局（如今更推荐使用 Flex 布局）

以上为我的经验，更多的没接触过，欢迎补充。前端

五 1px 实现

产生的缘由：git

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

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

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

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

方法一：利用 ::after + transformpost

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 种方法：

new Event
new CustomEvent
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库，可让咱们提早使用指针事件。好比：

谷歌的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】

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

一 目录

二 前言

三 移动端使用的单位

四 移动端布局总结