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】