也不會影響 viewport 的實(shí)際值, 也就是說, 對于一般電腦上的瀏覽器來說, 設(shè)不設(shè)定 viewport 并沒有差別。 <\/p>\n\n

\n \n \n 手機(jī)上的 Firefox\n<\/h3>\n\n

如果沒有設(shè)定 viewport, 把剛剛 HTML 內(nèi)容的 viewport 設(shè)定變成注解：
\n<\/p>\n\n

  \n<\/pre>\n\n\n\n
在手機(jī)上的 Firefox 顯示如下：<\/p>\n\n
<\/p>\n\n
把縮小顯示的部分放大, 會看到：<\/p>\n\n
<\/p>\n\n
由于預(yù)設(shè)的 viewport 寬度是 980, 為了能夠完整顯示網(wǎng)頁橫向內(nèi)容, 所以自動縮小到 0.4224 倍, 以便顯示網(wǎng)頁的橫向內(nèi)容。此倍數(shù)比 minimum-scale 的預(yù)設(shè)值 0.1 大, 會取代 minimum-scale 的設(shè)定, 使用者即使自行縮小顯示最多也就只能縮小到 0.4224 倍。 <\/p>\n\n
\n  \n  \n  設(shè)定 viewport 與螢?zāi)坏葘抃n<\/h4>\n\n
如果把 viewport 的設(shè)定加回來：
\n<\/p>\n\n
  \n<\/pre>\n\n\n\n
看到的畫面就會是這樣：<\/p>\n\n
<\/p>\n\n
你可以看到現(xiàn)在viewport 的寬度(window.innerWidth) 和裝置螢?zāi)坏膶挾?window.screen.width) 是一樣的, 都是414px, 會以此寬度顯示網(wǎng)頁, 并且縮放倍數(shù)是1, 可以清楚閱讀顯示的網(wǎng)頁內(nèi)容。由于這是可以顯示網(wǎng)頁橫向內(nèi)容的最大縮放倍數(shù), 也會取代 minimum-scale 預(yù)設(shè)的 0.1, 使用者自行縮放頁面最小只能縮到 1 倍。 <\/p>\n\n
如果保留預(yù)設(shè)縮放倍數(shù)為 1, 但是不設(shè)定 viewport 寬度, 像是這樣：
\n<\/p>\n\n
  \n<\/pre>\n\n\n\n
實(shí)際結(jié)果就跟設(shè)定寬度為 device-width 一樣。 <\/p>\n\n
\n  \n  \n  刻意設(shè)定 viewport 寬度\n<\/h4>\n\n
如果刻意設(shè)定 viewport 寬度為 980：
\n<\/p>\n\n
  \n<\/pre>\n\n\n\n
就會如下顯示：<\/p>\n\n
<\/p>\n\n
由于現(xiàn)在 viewport 的寬度比螢?zāi)粚? 所以在排列時(shí)就會延伸到螢?zāi)煌獾姆秶? 你也可以從實(shí)際顯示的結(jié)果看到螢?zāi)粚挾鹊拇_是 980。 <\/p>\n\n
如果刻意將 viewport 寬度設(shè)成比螢?zāi)徽? 像是：
\n<\/p>\n
\n<\/pre>\n\n\n\n
瀏覽器會以螢?zāi)粚挾葹樽畹偷?viewport 寬度, 所以顯示結(jié)果會和設(shè)定寬度為 device-width 一樣：<\/p>\n\n
<\/p>\n\n
如果只有設(shè)定 viewport 寬度, 沒有設(shè)定 initial-scale, 像是這樣：
\n<\/p>\n\n
\n\n  \n  \n  
  <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ù) = 
      
    
  

  







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


  
  
  手機(jī)上的 Firefox


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



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




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



把縮小顯示的部分放大, 會看到：



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


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

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



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




看到的畫面就會是這樣：



你可以看到現(xiàn)在viewport 的寬度(window.innerWidth) 和裝置螢?zāi)坏膶挾?window.screen.width) 是一樣的, 都是414px, 會以此寬度顯示網(wǎng)頁, 并且縮放倍數(shù)是1, 可以清楚閱讀顯示的網(wǎng)頁內(nèi)容。由于這是可以顯示網(wǎng)頁橫向內(nèi)容的最大縮放倍數(shù), 也會取代 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">




就會如下顯示：



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

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


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




瀏覽器會以螢?zāi)粚挾葹樽畹偷?viewport 寬度, 所以顯示結(jié)果會和設(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ù) = 
      
    
  

  






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


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


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



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




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



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

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


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


initial-scale 也可以設(shè)為小于1, 也就是縮小顯示, 但若是viewport 寬度照比例縮小會比螢?zāi)粚挾刃? 就會違反最小只能縮小到可以顯示網(wǎng)頁完整橫向內(nèi)容的規(guī)則, 瀏覽器就會自動將目前設(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"> -->




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



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



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



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




結(jié)果如下：



你可以看到寬度不變：




  
  
  圖片的顯示


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


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




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



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



你會看到由于圖片比較寬, 所以超過了螢?zāi)贿吔? 但是整體的頁面仍然是以 viewport 設(shè)定的寬度來編排, 因此 4 號方塊被擠到第二列。這種情況下, 使用者可以縮小的倍數(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)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！