H5 深度解析

時間 2019-11-10

標籤 h5 深度解析简体版

原文原文鏈接

先科普一下，HTML5並非一項技術，而是一個標準。
因此其實要麼咱們是做爲理論派討論HTML5標準，要麼是做爲實踐派討論HTML5標準在某瀏覽器的應用。
H5 其實是一個解決方案，一個看起來酷炫的移動端onepage網站的解決方案

移動端的適配方案

rem適配
優勢：css

1. 引用簡單，佈局簡便
    2. 根據設備屏幕的DPR,自動設置最合適的高清縮放
    3. 有效解決移動端真實1px問題

可是毫不是每一個地方都要用rem，rem只適用於固定尺寸！

在這裏 rem也是一種單位，而且能夠爲我們的佈局提供無線的變化，根據開發者的設定，它將會在不一樣的分辨率屏幕上展現不一樣的色彩。

這個單位的定義和em相似，不一樣的是em是相對於父元素，而rem是相對於根元素<html>，當咱們指定一個元素的font-size爲2rem的時候，也就說這個元素的字體大小爲根元素<html>字體大小的兩倍，若是html的font-size爲12px，那麼這個2rem的元素font-size就是24px。html

html {font-size: 12px;}
    h1 { font-size: 2rem; } 2*12 = 24px

    html {font-size: 16px;}
    h1 { font-size: 2rem; } 2*16 = 32px

單位	定義	特色
rem	font size of the root element	以根元素字體大小爲基準
em	font size of the element	以父元素字體大小爲基準

固然上邊只是咱們介紹 rem簡單的示例，具體運用到項目中我還需進行 rem的計算，根據根元素的 font-size經過Javascript來計算咱們的 rem單位適配

選取一個設備寬度做爲基準，設置其根元素大小，其餘設備根據此比例計算其根元素大小。好比使得iPhone6根元素font-size=16px。

設備	設備寬度	根元素font-size/px	寬度/rem
iPhone5	320	計算	-
iPhone6	375	16	23.4375
iPhone7	375	16	23.4375
iPhone7plus	414	計算	-

根元素fontSize公式：width/fontSize = deviceWidth/deviceFontSize

下方爲動態計算
  (function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  
  setBodyFontSize();
  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    console.log(rem)
    docEl.style.fontSize = rem + 'px'
  }
  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

上方的代碼則是本人常用的rem計算方法，咱們能夠根據咱們本身的需求設定基於多大的屏幕以及rem的換算倍率等ios

百分比方案

使用百分比佈局大部分是可行的，它會讓佈局隨着屏幕的大小自動縮放，並且不用寫太多的css樣式，以及js相關的計算操做，可是文字就存在很是大的問題了，因爲文字是固定大小，在屏幕dpr變化的時候，文字的CSS像素不變，就致使了文字在頁面中的佔位發生了變化。這樣的結果就是，文字過多或者屏幕dpr太小的時候，會發生溢出；可是若是按照小屏幕爲基準，又會發生字體過小這種狀況。
百分比在當前移動端適配排版的時候，更多地會做爲section級別元素的兼容排版。這個也要和設計稿中的效果相關，若是設計稿中要求一個元素定寬，那麼就直接用px來保證寬度就能夠了。

vw方案

vw也是css的單位，1vw至關於1%，好比：瀏覽器視口尺寸爲370px,那麼 1vw = 370px * 1% =6.5px(瀏覽器會四捨五入向下取7)，
咱們來看看vw的瀏覽器和手機的兼容性問題
瀏覽器

手機git

在移動端 iOS 8 以上以及 Android 4.4 以上得到支持，而且在微信 x5 內核中也獲得完美的全面支持
vw自身將整個可見視口橫向分紅了100份，每個單位就是1vw，這個單位最大的優點就是在移動端的時候，不管是豎屏或者橫屏，vw永遠都是針對於橫向的，比rem的方案好在當屏幕大小發生變化（順便兼容了之後的可調節屏幕大小的移動設備[手動斜眼]）的時候，不會讓頁面崩掉。
對於移動設備來講，好比iphone6+的375pxCSS像素寬度，1vw就等於3.75px，經過這個單位能夠解決上面的依賴於腳本綁定根元素font-size的問題，在豎屏和橫屏下面都有比較好的效果github

$w-base: 375px
$w-base-design: 750px
@function px2vw($px)
    @return ($px / $w-base-design) * 100vw

雖然vw能夠獲得很好的支持，可是不會獲得視覺稿本來的像素值了。在後期進行維護的時候會增長不少不少不少麻煩，前期打怪爽，後期裝備維護難web

淘寶移動端適配方案

淘寶segmentfault

移動端事件

click：單擊事件，相似於PC端的click，但在移動端中，連續click的觸發有200ms ~ 300ms的延遲
touchstart：手指觸摸到屏幕會觸發
touchmove：當手指在屏幕上移動時，會觸發
touchend：當手指離開屏幕時，會觸發
touchcancel：可由系統進行的觸發，好比手指觸摸屏幕的時候，忽然alert了一下，或者系統中其餘打斷了touch的行爲，則能夠觸發該事件

移動端常見問題

1px問題瀏覽器

你們都知道咱們再寫web端適配的時候還須要兼容ie瀏覽器，這是由於瀏覽器的內核都不同，並且咱們的屏幕大小，屏幕廠商也是不同，時常會發生缺乏像素或者多像素現象，其實手機也同樣屏幕大小不一，瀏覽器也是各式各樣，拿iphone6爲例，其dpr(device pixel ratio)設備像素比爲2，css中一個1x1的點，其實在iphone6上是2x2的點,而且1px的邊框在devicePixelRatio = 2的Retina屏下會顯示成2px，在iPhone6 Plus下甚至會顯示成3px。

這個問題的解決方案有不少，我的以爲最簡單方面的仍是大漠大大的一種解決方案。
使用postcss-write-svg插件微信

利用meta標籤對viewport進行控制
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>app

2.刪除默認的蘋果工具欄和菜單欄 <meta name="apple-mobile-web-app-capable" content="yes">

3.在web app應用下狀態條（屏幕頂部條）的顏色 (iphone設備中的safari私有meta標籤 )<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）若值爲「black-translucent」將會佔據頁面px位置，浮在頁面上方

4.容許全屏模式瀏覽 (iphone設備中的safari私有meta標籤 )<meta content="yes" name="apple-mobile-web-app-capable">

5.禁止了把數字轉化爲撥號連接 <meta name="format-detection" content="telephone=no"> 在iPhone上默認將電話號碼變爲超連接（藍色字體）而且點擊這個數字還會自動撥號

6.ios click點擊事件延時300ms

7.移動端如何定義字體font-family

8.移動端字體單位font-size選擇px仍是rem (new)

9.移動端touch事件(區分webkit 和 winphone) (new)

更多問題

webApp與響應式區別

響應式：
    設計經過CSS3的MQ（Media queries），使網頁在不一樣設備上均可以自動適應，從而具備更加優秀的表現效果。
    並且響應式設計不只用在移動網站，在PC端也有不一樣屏幕的適配，並且移動端和PC端能夠只使用一套代碼，這就是全平臺的響應式設計
Webapp：
    HTML5移動端（移動網站、混合應用、WebAPP）爲了解決屏幕適配常常會使用響應式設計（流式佈局、CSS3媒體查詢），
    可是響應式設計並非必須，也可使用流式佈局和remnant來解決移動端的屏幕適配問題

meta標籤

META標籤，是在HTML網頁源代碼中一個重要的html標籤。META標籤用來描述一個HTML網頁文檔的屬性，例如做者、日期和時間、網頁描述、關鍵詞、頁面刷新等

做用

META標籤是HTML標記HEAD區的一個關鍵標籤，它位於HTML文檔的<head>和<title>之間（有些也不是在<head>和<title>之間）。它提供的信息雖然用戶不可見，但倒是文檔的最基本的元信息。<meta>除了提供文檔字符集、使用語言、做者等基本信息外，還涉及對關鍵詞和網頁等級的設定

參考
手機端頁面自適應解決方案—rem 佈局進階版
 移動端Web頁面適配方案
 vh,vw單位你知道多少？

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。