設(shè)計(jì)網(wǎng)頁時(shí), 都會(huì)加上以下這行 meta 標(biāo)籤：

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

以便在手機(jī)螢?zāi)簧弦材茱@示可以輕鬆閱讀文字的網(wǎng)頁, 不過我自己一直沒有仔細(xì)研究這行在說什麼, 今天剛好花了點(diǎn)時(shí)間測(cè)試, 記錄下來。

要素一：以 devicePixelRatio 調(diào)整 px 大小

實(shí)際在顯示網(wǎng)頁時(shí)是以CSS 像素(px) 為基準(zhǔn), 這個(gè)CSS 像素並不是實(shí)際硬件的像素, 兩者之間對(duì)應(yīng)的關(guān)係就由window.devicePixelRatio 來決定, 若這個(gè)比例是2,就表示在目前的裝置中, 會(huì)用2×2 個(gè)像素來代表一個(gè)px, 透過這個(gè)比例, 就可以讓同樣px 數(shù)的字在不同尺寸的裝置上都能顯示合適的大小, 而不會(huì)顯示過小無法閱讀。以下是我在不同裝置或不同顯示比例下得到的 devicePixelRatio 比例：

你可以看到即使是相同的裝置上, 不同的瀏覽器也可能會(huì)有不同的比例, 顯示時(shí)就是以這個(gè)比例為基準(zhǔn), 表示一個(gè) px 的大小。

要素二：設(shè)定 viewport 的大小

所謂的 viewport, 指的就是瀏覽器視窗內(nèi)可以用來顯示網(wǎng)頁的區(qū)域, 這個(gè)大小一樣是使用步驟一得到的 px 為單位。在手機(jī)這類裝置上因?yàn)闆]有視窗, 所以 viewport 是一個(gè)假想的虛擬視窗。

viewport 的設(shè)定中, 最重要的是 width(寬度), 可以設(shè)定為 1~10000, 它會(huì)影響網(wǎng)頁元素的排列、文字折行等等。在手機(jī)裝置上, 如果想把viewport 設(shè)定為和螢?zāi)灰粯訉? 可以從裝置的實(shí)際像素寬度值除以devicePixelRatio 得到以px 為單位的viewport 寬度值；或者直接設(shè)定為device-width 由系統(tǒng)幫你計(jì)算,讓網(wǎng)頁的寬度與裝置的螢?zāi)粚挾纫恢隆Ｈ绻麤]有設(shè)定 viewport, 預(yù)設(shè)值為 980。

在 JavaScript 中, 你可以透過以下方式取得螢?zāi)慌c viewport 以 px 為單位的寬度：

要素三：縮放比例

檢視頁面時(shí), 使用者可以縮放, 在 vi??ewport 設(shè)定中的 initial-scale 就是設(shè)定首次載入頁面後的縮放比例 (0.1~10.0)。如果沒有設(shè)定, 瀏覽器預(yù)設(shè)會(huì)自動(dòng)縮放到能夠顯示頁面橫向完整內(nèi)容的最大比例。

前面提過, 沒有設(shè)定viewport 時(shí)預(yù)設(shè)寬度會(huì)是980px, 以剛看到的Google Pixel 8A 的Firefox 為例, 螢?zāi)粚挾仁?080/2.6087 = 414px, 瀏覽器必須將網(wǎng)頁縮到414/ 980 =42.2% 才能完整顯示網(wǎng)頁橫向的內(nèi)容, 導(dǎo)致字太小無法閱讀。

如果需要, 也可以在 viewport 中設(shè)定 minimum-scale 限制使用者可以縮放的最小倍數(shù), 預(yù)設(shè)為 0.1。如果完整顯示網(wǎng)頁橫向內(nèi)容的最大縮放倍數(shù)比 minimum-scale 設(shè)定的倍數(shù)大, 就會(huì)取代 minimum-scale 的設(shè)定, 也就是最小只能縮到可以顯示網(wǎng)頁橫向內(nèi)容為止。你也可以設(shè)定 maximum-scale 限制最大倍數(shù), 預(yù)設(shè)為 10?；蛘咭部梢赃M(jìn)一步透過設(shè)定 user-scalable 設(shè)定 1/0 或是 yes/no 限制使用者可無法縮放。

在 JavaScript 中可以如下方式取得目前頁面的縮放倍數(shù)：

實(shí)測(cè)

以下我們就以底下的網(wǎng)頁實(shí)際測(cè)試：

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

電腦上的 Firefox

在電腦上的 Firefox 顯示如下：

你可以看到 viewport 的寬度就是目前瀏覽器視窗的寬度 646px, 即使把 viewport 設(shè)定拿掉, 顯示結(jié)果也不會(huì)改變。如果刻意把 viewport 的寬度設(shè)定的比視窗寬, 例如：

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <script>
    window.addEventListener('load', function() {
      document.getElementById('devicePixelRatio').textContent = window.devicePixelRatio;
      document.getElementById('screenWidth').textContent = window.screen.width;
      document.getElementById('innerWidth').textContent = window.innerWidth;

      // 取得並顯示目前的縮放倍數(shù)
      function updateScale() {
        const currentScale = window.visualViewport ? window.visualViewport.scale : '不支援';
        document.getElementById('currentScale').textContent = currentScale;
      }

      // 初始化顯示
      updateScale();

      // 監(jiān)聽縮放變化
      if (window.visualViewport) {
        window.visualViewport.addEventListener('resize', updateScale);
      }
    });
  </script>


  1
  2
  3
  4
  5
  6
  7
  8

  

    

      window.devicePixelRatio = 
      
    
    

      window.screen.width = 
      
    
    

      window.innerWidth = 
      
    
    

      目前縮放倍數(shù) = 
      
    
  

  

也不會(huì)影響 viewport 的實(shí)際值, 也就是說, 對(duì)於一般電腦上的瀏覽器來說, 設(shè)不設(shè)定 viewport 並沒有差別。

手機(jī)上的 Firefox

如果沒有設(shè)定 viewport, 把剛剛 HTML 內(nèi)容的 viewport 設(shè)定變成註解：

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

在手機(jī)上的 Firefox 顯示如下：

把縮小顯示的部分放大, 會(huì)看到：

由於預(yù)設(shè)的 viewport 寬度是 980, 為了能夠完整顯示網(wǎng)頁橫向內(nèi)容, 所以自動(dòng)縮小到 0.4224 倍, 以便顯示網(wǎng)頁的橫向內(nèi)容。此倍數(shù)比 minimum-scale 的預(yù)設(shè)值 0.1 大, 會(huì)取代 minimum-scale 的設(shè)定, 用戶即使自行縮小顯示最多也就只能縮小到 0.4224 倍。

設(shè)定 viewport 與螢?zāi)坏葘?

如果把 viewport 的設(shè)定加回去：

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

看到的畫面就會(huì)是這樣：

你可以看到現(xiàn)在viewport 的寬度(window.innerWidth) 和裝置螢?zāi)坏膶挾?window.screen.width) 是一樣的, 都是414px, 會(huì)以此寬度顯示網(wǎng)頁, 並且縮放倍數(shù)是1, 可以清楚閱讀顯示的網(wǎng)頁內(nèi)容。由於這是可以顯示網(wǎng)頁橫向內(nèi)容的最大縮放倍數(shù), 也會(huì)取代 minimum-scale 預(yù)設(shè)的 0.1, 用戶自行縮放頁面最小只能縮到 1 倍。

如果保留預(yù)設(shè)縮放倍數(shù)為 1, 但是不設(shè)定 viewport 寬度, 像這樣：

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

實(shí)際結(jié)果就跟設(shè)定寬度為 device-width 一樣。

刻意設(shè)定 viewport 寬度

如果刻意設(shè)定 viewport 寬度為 980：

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

就會(huì)如下顯示：

由於現(xiàn)在 viewport 的寬度比螢?zāi)粚? 所以在排列時(shí)就會(huì)延伸到螢?zāi)煌獾墓?fàn)圍, 你也可以從實(shí)際顯示的結(jié)果看到螢?zāi)粚挾鹊拇_是 980。

如果刻意將 viewport 寬度設(shè)成比螢?zāi)徽? 像是：

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

瀏覽器會(huì)以螢?zāi)粚挾葹樽畹偷?viewport 寬度, 所以顯示結(jié)果會(huì)和設(shè)定寬度為 device-width 一樣：

如果只有設(shè)定 viewport 寬度, 沒有設(shè)定 initial-scale, 像是這樣：

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <script>
    window.addEventListener('load', function() {
      document.getElementById('devicePixelRatio').textContent = window.devicePixelRatio;
      document.getElementById('screenWidth').textContent = window.screen.width;
      document.getElementById('innerWidth').textContent = window.innerWidth;

      // 取得並顯示目前的縮放倍數(shù)
      function updateScale() {
        const currentScale = window.visualViewport ? window.visualViewport.scale : '不支援';
        document.getElementById('currentScale').textContent = currentScale;
      }

      // 初始化顯示
      updateScale();

      // 監(jiān)聽縮放變化
      if (window.visualViewport) {
        window.visualViewport.addEventListener('resize', updateScale);
      }
    });
  </script>


  1
  2
  3
  4
  5
  6
  7
  8

  

    

      window.devicePixelRatio = 
      
    
    

      window.screen.width = 
      
    
    

      window.innerWidth = 
      
    
    

      目前縮放倍數(shù) = 
      
    
  

  

仍會(huì)採用 1.0 為啟始的縮放倍數(shù)。

設(shè)定大於 1 的啟始倍數(shù)

如果更改縮放倍數(shù), 就可以在網(wǎng)頁首次載入後就採用指定的縮放倍數(shù), 例如：

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

就會(huì)看到放大 3 倍的結(jié)果：

請(qǐng)注意 initial-scale 只對(duì)首次載入網(wǎng)頁有效, 即使你修改設(shè)定重新載入網(wǎng)頁, 如果原本該網(wǎng)頁的縮放倍數(shù)合乎新設(shè)定的縮放範(fàn)圍內(nèi), 就會(huì)維持原本的縮放倍數(shù)。因此建議開啟新的隱私權(quán)頁面測(cè)試會(huì)比較準(zhǔn), 否則可能會(huì)發(fā)生修改 initial-scale 卻不會(huì)改變顯示比例的狀況。

如果你就是要強(qiáng)制使用者以放大倍率觀看網(wǎng)頁, 可以設(shè)定 minimum-scale, 不過這應(yīng)該是從一開始設(shè)計(jì)時(shí)就把網(wǎng)頁內(nèi)容放大才比較正確。

設(shè)定小於 1 的啟始倍數(shù)

initial-scale 也可以設(shè)為小於1, 也就是縮小顯示, 但若是viewport 寬度照比例縮小會(huì)比螢?zāi)粚挾刃? 就會(huì)違反最小只能縮小到可以顯示網(wǎng)頁完整橫向內(nèi)容的規(guī)則, 瀏覽器就會(huì)自動(dòng)將目前設(shè)定的viewport 寬度除以縮小倍數(shù), 讓網(wǎng)頁可以保持縮到最小倍數(shù)時(shí)可以呈現(xiàn)完整橫向的內(nèi)容。例如, 若設(shè)定為 0.5：

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

就會(huì)把 viewport 的寬度變成 414/0.5=828px：

放大看詳細(xì)的數(shù)據(jù)：

如果一開始把 viewport 寬度設(shè)得夠?qū)? 就會(huì)保持 meta 標(biāo)籤中的設(shè)定, 例如：

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

結(jié)果如下：

你可以看到寬度不變：

圖片的顯示

如果你在網(wǎng)頁中放入圖片, 這時(shí)候圖片的解析度會(huì)以px 為單位解譯, 所以一張200×200 的圖片, 在devicePixelRatio 為2 的裝置上, 就會(huì)以400×400 個(gè)實(shí)體像素來顯示。例如在剛剛的網(wǎng)頁最後面我們加上了一張圖片：

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

這是一張 584×604 大小的圖片：

網(wǎng)頁顯示結(jié)果如下：

你會(huì)看到由於圖片比較寬, 所以超過了螢?zāi)贿吔? 但是整體的頁面仍然是以 viewport 設(shè)定的寬度來編排, 因此 4 號(hào)方塊被擠到第二列。這種情況下, 使用者可以縮小的倍數(shù)可以比 initial-scale 設(shè)定的 1.0 小, 最小可到能夠完整顯示圖片的寬度為止, 像是這樣：

上圖就縮小到了 0.749 倍。

如果刻意把 viewport 寬度設(shè)成與圖片同寬：

你可以看到跟剛剛的結(jié)果不同, 現(xiàn)在上方的 4,5 兩個(gè)方塊都排到第一列了, 這是因?yàn)?viewport 的設(shè)定變寬了。

以上是HTML meta 標(biāo)籤中 viewport 的設(shè)定的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！