0基礎學習移動端適配

時間 2019-11-05

標籤基礎學習移動適配欄目無線简体版

原文原文鏈接

這是關於移動端適配的第一篇文章，這篇文章主要介紹視口以及和視口有關的meta標籤的使用。css

無論三七二十一，咱們先新建一個頁面：html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>這不是一個demo</title>
        <style type="text/css">
            *{margin: 0; padding: 0;}
            div{height: 100px; background: red;}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

在谷歌瀏覽器下，咱們能夠看到不一樣手機的適配狀況：
瀏覽器

能夠看出，無論是i5/i6/i6plus下，div的寬度都爲980px，這個980是什麼值，爲何它好像和移動設備無關？ide

其實這個980所表示的就是佈局視口。
佈局視口layout viewport ：就是移動設備上用來裝載咱們的網頁的那一塊區域。瀏覽器廠商爲了讓用戶在小屏幕下網頁也可以顯示地很好，因此把佈局視口寬度設置地很大，通常在 768px ~ 1024px之間。不一樣的設備有不一樣的寬度。最多見的寬度是980。下圖是不一樣設備下佈局視口的大小。佈局

佈局視口有980像素，但是咱們的屏幕很小，按理說應該會有滾動條纔是，可實際上並無。這就須要歸功於另外一個視口：視覺視口。字體

視覺視口visual viewport：屏幕上顯示的頁面的一部分。聽起來很玄乎，但是你認真看下面這張圖，你就能明白視覺視口(visual viewport)和佈局視口(layout viewport)的關係了：

ui

此時，由於咱們的視覺視口 = 佈局視口，因此沒有出現滾動條。雖然說是沒有滾動條，可是pc端能友好顯示的頁面，在移動端上就顯示的很怪異。字體很小，很難看清。好比親愛的百度：
idea

若是想讓字體大小可讀，又該怎麼辦？在此以前，咱們還須要瞭解另外一個視口，理想視口。
理想視口ideal viewport：它提供了設備上理想網頁的大小。這個值能夠在不一樣設備的理想視口查到。經常使用的有：i5是320，i8是375，plus是414。spa

扯了那麼多，那要如何適配呢？
相信必定會有一些前輩，他們苦口婆心地告訴你，你只要加這一行代碼就能夠了：3d

<meta content="width=device-width, initial-scale=1.0" name="viewport">

懷有好奇心的咱們，勇敢地做出了嘗試：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>這不是一個demo</title>
        <style type="text/css">
            *{margin: 0; padding: 0;}
            div{height: 100px; background: red;}
        </style>
    </head>
    <body>
        <div>hello world</div>
    </body>
</html>

獲得了以下的效果：

字體在三大尺寸下，顯示都算是友好，可是奇怪的是div的寬度再也不是980，而是和設備的寬度有關。這一切，都得歸功於咱們剛剛加的width=device-width了。

width=device-width，這句代碼的意思就是把佈局視口 = 理想視口。那既然佈局視口跟着變了，那剛剛的視覺視口又算咋回事啊，它如今的值等於多少？這不還有咱們剛剛設置的另外一個代碼initial-scale=1.0，它的做用就是改變視覺視口的。

initial-scale指的是縮放係數。其中有這樣的公式：

視覺視口寬度 = 理想視口寬度 / 縮放係數
縮放係數 = 理想視口寬度 / 視覺視口寬度

拿i5的機型來講，根據公式可得：
視覺視口寬度 = 320 / 1 = 320
佈局視口寬度 = 320
因此：視覺視口寬度 = 佈局視口寬度。頁面無滾動條。

那若是我改變initial-scale的值會有什麼反應呢，一樣我以i5的機型作示範：

initial-scale = 0.5 「 div寬度640，頁面無滾動條 」

initial-scale = 1 「 div寬度320，頁面無滾動條 」

initial-scale = 1 「 div寬度320，頁面有滾動條 」

如今咱們好好來捋捋：

initial-scale = 0.5 「 div寬度640，頁面無滾動條 」
視覺視口寬度 = 320 / 0.5 = 640
佈局視口寬度 = 320
又由於：視覺視口不能大於佈局視口，因此此時，將佈局視口的寬度提升等於640
總結：視覺視口 = 佈局視口 = 640

initial-scale = 1 「 div寬度320，頁面無滾動條 」
視覺視口寬度 = 320 / 1 = 320
佈局視口寬度 = 320
總結：視覺視口 = 佈局視口 = 320

initial-scale = 2 「 div寬度320，頁面有滾動條 」
視覺視口寬度 = 320 / 2 = 160
佈局視口寬度 = 320
總結：視覺視口 < 佈局視口 頁面出現了滾動條。

最後總結：

頁面是否出現滾動條，看佈局視口和視覺視口的大小
頁面元素的寬度取決於佈局視口的大小

留個思考題：爲何在未設置<meta>的狀況下，頁面無滾動條，瀏覽器作了哪些默認的設置？

參考：

相關標籤/搜索

每日一句

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