移動端適配--meta標籤玩的是什麼

時間 2019-11-06

標籤移動適配 meta 標籤什麼欄目無線简体版

原文原文鏈接

基本一直都在作移動端的開發，rem佈局也寫了好久，不過對於實現的原理有些模棱兩可的盲點，本身總結一下留着之後回顧。本文分如下幾個層面，主打用最最通俗的語言來闡述。css

佈局小例子
viewport做用
viewport和移動端適配的關係
flexible.js原理
vw vh
flexible.js VS vw vh

佈局小例子----常見困惑

iphone6尺寸是375*667，那給div設置寬度375px後，爲何寬度不是充滿屏幕呢? 代碼以下：（爲了方面看，我全截圖吧）html

而後運行結果以下：

這是爲何呢？來看一下頁面寬度是多少前端

哦？這個980是哪裏來的呢？帶着疑問引出本文的主角----viewport

viewport做用

viewport是什麼？翻譯過來就是視窗的意思，只不過在移動端，視窗稍微有點繞。在解釋這個以前，不得不引出幾個詞彙，分別是物理像素（physical pixel），設備獨立像素（density-indenpendent pixel），設備像素比（device pixel ratio），要怎麼通俗理解這三個詞呢？容我找找網上的圖。ios

物理像素

手機屏幕顯示圖像的最小單元。上圖中iphone4和3gs，一樣大小尺寸狀況下，iphone4明顯畫面細膩不少，這是爲何？屏幕尺寸沒變，分辨率提高，畫面就細膩了，更通俗一點的就是iphone4用來顯示圖像的點更多了，把屏幕上的物理像素點想象成整齊排列的點陣，3gs有320 * 480個點而ip4有960 * 640個點。瀏覽器

設備獨立像素

若是把物理像素看作是負責顯示圖像的硬件的話，那麼設備獨立像素是什麼呢？咱們平時寫的css像素就是設備獨立像素的一種了。而這1px的css像素，在不一樣的手機倒是呈現不一樣的，爲何ip4畫面細膩？就是人家用4個物理像素點來描繪一個css像素。iphone

設備像素比

也就是常說的dpr ， dpr = 物理像素/設備獨立像素（注意，是在某一方向的，x軸或者y軸） , 理解這個很重要，iphone6的dpr是2，iphonex的dpr是3。ide

dpr是2的狀況下css畫一個點，這個點是由4個物理像素點提供支撐的。畫一條線的話，那這條線實際上是2排物理像素點支撐的。佈局

同理，dpr是3的狀況下css畫一個點，這個點是由9個物理像素點提供支撐的。畫一條線的話，那這條線實際上是3排物理像素點支撐的。字體

viewport登場

在移動端，視窗分爲三種，分別爲layoutviewport、visualviewport、idealviewport。能夠先記住一個，idealviewport就認爲是設備寬度就好，iphone6就是375，iphone6p 就是414 ，其他兩個先看我下面例子吧。flex

對於上面的代碼作簡單修改 簡要說明下： js動態生成一個關於viewport的標籤，meta標籤能夠控制viewport的縮放。

window.devicePixelRatio ：查看設備dpr

document.documentElement.clientWidth ：查看layoutviewport寬度

window.visualViewport.width ：查看visualViewport寬度

window.innerWidth ：查看文檔寬度

只設置initial-scale = 1

不加meta標籤

initial-scale=2, width=device-width

initial-scale= 0.5 , width=device-width

須要來個小結了：

layoutviewport

默認是980 （針對ios）

設置縮放爲1 寬度爲設備寬度時：就是375（設備寬度）

設置縮放爲2 寬度爲設備寬度時：仍是375（設備寬度）

設置縮放爲0.5 寬度爲設備寬度時：是750（設備寬度的2倍）

layoutviewport 取設置的寬度或者visualviewport他們中的最大值

visualviewport

默認是980 （針對ios）

設置縮放爲1 寬度爲設備寬度時：就是375（設備寬度）

設置縮放爲2 寬度爲設備寬度時：是187.5（設備寬度一半）

設置縮放爲0.5 寬度爲設備寬度時：是750（設備寬度的2倍）

實際上是有公式的，visualviewport = 設備寬度/縮放。也就是visualviewport = idealviewport / initial-scale

idealviewport

顧名思義，是理想視窗意思，就是指的設備尺寸，主要用來和initial-scale配合，計算也就是visualviewport用的。

那layoutviewport和visualviewport負責什麼

其實也是能夠從名字就看出來的，layoutviewport佈局視窗，visualviewport視覺視窗。這裏加個圖，initial-scale = 1 width=devide-width，而後box寬度設置750px，發現html寬度在375，頁面出現滾動條，而且，有意思的是，是按照375寬度排列的，只有那個設置了寬度是750的box寬度變大，因此layoutviewport負責佈局，visualviewport負責視覺，是否是有了點直觀印象了，以下圖：

layoutviewport和visualviewport不一致的狀況下，頁面就會出現滾動條。（截圖滾動條不明顯）

viewport和移動端適配關係

這裏就更很差用語言描述了，有些抽象。回顧上文，知道iphone3gs iphone6 iphonex三者屏幕尺寸大小不一樣，dpr的話，前二者是1 2 而 iphonex是3。那如何使得一張前端頁面，在每一個手機看起來都是同樣大呢？以iphone6和iphonex來舉例，雖然屏幕寬度都是375，可是iphonex卻擁有更加密集的物理像素點陣。iphone3gs更不用說，320的寬度，dpr又是1。假若咱們規定，只用設備的物理像素，來繪製css的像素，要求一比一的繪製，那一張320px寬度的頁面，在3個手機上的展現必定大體以下：

這只是一個示意圖，也許並不精準。不過大致就是這樣的，ip6寬度有着750個物理像素點，iphonex寬度有1125個物理像素點，因此根據上面的假想要求，畫出來的必定是這樣的。那麼想要iphone6畫出的這個320px的頁面也充滿屏幕的話，要怎麼作？首先假如設置initial-scale=1, width=device-width，這種狀況下，寬度375的iphone6畫出寬度320px的前端頁面大體什麼樣呢？

就是這樣的效果圖，可是須要注意的是，此時的一條橫線，3gs是用一排物理像素點描繪的，而iphone6確是用了兩排物理像素點！也就引伸出了經典的1px邊框問題。iphone6的物理像素點再密集，用兩排畫一條線和只用一排畫一條線，仍是能看出差距的。那麼這種狀況是不可取的。那假如設置initial-scale=0.5, width=device-width，這種狀況下呢？我也想畫出看着和iphone3gs同樣視覺大小的圖像的話，（注意是視覺大小哦，就是拿着兩手機，看着屏幕中的圖同樣大。）要怎麼作呢？根據上面知識，對視窗進行了0.5縮放，那此時肉眼看到視覺是否是就和上面提到的這個圖一致了呢？

因此，咱們須要在這種狀況下，寫css是寬度寫爲640px，就能看起來和上面initial-scale=1, width=device-width同樣的效果了！也解決了1px像素問題！

rem適配方案

rem是什麼，這個你們應該都清楚了。就是給html設置字體大小，假如是30px，那麼頁面中寫了2rem那就是60px。設計給出一張設計稿，頁面寬度是750px，其中一個div標註了是寬度375px。如何作到在iphone6和iphonex中，看到的這個div都是屏幕寬度的一半呢？

相信你們都已經有答案了。

對於iphone6 設置initial-scale=0.5, width=device-width，而後就直接寫375px就好對於iphonex 設置initial-scale=1/3, width=device-width，而後就直接寫（375*（3/2））px就好。缺點就是須要咱們自行計算。

rem方案：設計稿750px，div標註375px，對於iphone6 設置initial-scale=0.5, width=device-width，若是html設置font-size爲75px，那div咱們就直接寫5rem就好了。而後適配到iphonex中時，不須要改變div的5rem，只需改變在iphonex中html的字體以及頁面縮放，設置 iphonex中 initial-scale=1/3, width=device-width，而後設置html字體爲112.5px，此時的5rem爲562.5px，恰好是屏幕1125的一半。