viewport是什么？(江湖称响应式web设计)
響應式 Web 設計 - Viewport
什么是 Viewport?
viewport 是用戶網頁的可視區域。
viewport 翻譯為中文可以叫做"視區"。
手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，通常這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），用戶可以通過平移和縮放來看網頁的不同部分。
這樣聽起來好像有點生硬，這樣我們舉個例子，看看效果。
未加上viewport時：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><!--<meta name="viewport" content="width=device-width, initial-scale=1.0">--><title>bs實例</title><link rel="stylesheet" href="css/bootstrap.min.css" /><script src="js/bootstrap.min.js"></script><script src="js/jquery.min.js"></script></head><body><img src="../bootstrap-3.3.7/bootstrap-3.3.7/docs/assets/img/components.png" /><p>下沉市場變成所有互聯網企業的必爭之地。若問下沉市場將帶來怎樣的商機？阿里巴巴整個財年超過1億的新增用戶有77%來自于三線及以下城市。依靠下沉市場快速登陸資本市場的拼多多過去一年股價漲幅達到103.98%，市值一舉超過百度和京東。瞄向下沉市場是一場危機下的狂歡，如今成了流量紅利消失后的增長機會。 從另一側來看，在國內移動互聯網全面普及的大背景下，互聯網正在以前所未有的程度從線上世界融入到社會行業發展的多個層面，并且推動了 5G、大數據、人工智能、區塊鏈等技術的進一步發展。在這樣的大拐點中，以 BAT為代表，身處其中的中國互聯網企業也在以各自不同的方式積極尋求改變。 在之前，互聯網或軟件企業對技術的看法不一，它看不見摸不著，但有用，有多大？有運營的因素，也有其它因素，似乎技術很有用。在互聯網生活中，遠程視頻，交流互動，共享圖片，結識新朋友，做生意等，都是由全球千萬計的工程師（開發者，決策者，組織，個人等）不斷貢獻，提出新想法，開發出創新服務。 也正緣由于此，中國的IT互聯網出現了一些共同點：包括 BAT，TMD 等大小巨頭在內，這些代表性中國互聯網企業在架構調整和人事變動中均豎起了技術之旗幟。 ———————————————— 版權聲明：本文為CSDN博主「喬治大哥」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/qq_41946557/article/details/104073031</p></body></html>運行結果
當使用viewport時
<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bs實例</title><link rel="stylesheet" href="css/bootstrap.min.css" /><script src="js/bootstrap.min.js"></script><script src="js/jquery.min.js"></script></head><body><img src="../bootstrap-3.3.7/bootstrap-3.3.7/docs/assets/img/components.png" /><p>下沉市場變成所有互聯網企業的必爭之地。若問下沉市場將帶來怎樣的商機？阿里巴巴整個財年超過1億的新增用戶有77%來自于三線及以下城市。依靠下沉市場快速登陸資本市場的拼多多過去一年股價漲幅達到103.98%，市值一舉超過百度和京東。瞄向下沉市場是一場危機下的狂歡，如今成了流量紅利消失后的增長機會。 從另一側來看，在國內移動互聯網全面普及的大背景下，互聯網正在以前所未有的程度從線上世界融入到社會行業發展的多個層面，并且推動了 5G、大數據、人工智能、區塊鏈等技術的進一步發展。在這樣的大拐點中，以 BAT為代表，身處其中的中國互聯網企業也在以各自不同的方式積極尋求改變。 在之前，互聯網或軟件企業對技術的看法不一，它看不見摸不著，但有用，有多大？有運營的因素，也有其它因素，似乎技術很有用。在互聯網生活中，遠程視頻，交流互動，共享圖片，結識新朋友，做生意等，都是由全球千萬計的工程師（開發者，決策者，組織，個人等）不斷貢獻，提出新想法，開發出創新服務。 也正緣由于此，中國的IT互聯網出現了一些共同點：包括 BAT，TMD 等大小巨頭在內，這些代表性中國互聯網企業在架構調整和人事變動中均豎起了技術之旗幟。 ———————————————— 版權聲明：本文為CSDN博主「喬治大哥」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/qq_41946557/article/details/104073031</p></body></html>結果展示
這時候就有人說了，嗯？這不一樣的結果嗎？請重新閱讀我上面在（什么是 Viewport?）中提到的話，沒錯就是換成手機版進行測試，嗯，用手機？？？當然不是讓你在手機上運行它啦。在電腦上的谷歌瀏覽器中模擬手機
即在你運行的網頁上點擊F12，然后點擊這個標志
嗯，我上圖吧。
這是為加viewport的展示圖：
這是加了viewport的展示圖：
當然如果你覺得還是不夠透徹，我建議，動動手敲一敲，運行一番，看看結果。
然后你會發現這個圖片怎么沒有響應式的布局呢？
沒錯，如果想使圖像也響應式展示，則補充：
<img class="img-responsive" src="../bootstrap-3.3.7/bootstrap-3.3.7/docs/assets/img/components.png" />結果展示：
最后小總結：
設置 Viewport
一個常用的針對移動網頁優化過的頁面的 viewport meta 標簽大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
設置響應式圖像
<img src="..." class="img-responsive" alt="響應式圖像">
width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放。
width 屬性控制設備的寬度。假設您的網站將被帶有不同屏幕分辨率的設備瀏覽，那么將它設置為 device-width 可以確保它能正確呈現在不同設備上。
補充：
initial-scale=1.0 確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。
在移動設備瀏覽器上，通過為 viewport meta 標簽添加 user-scalable=no 可以禁用其縮放（zooming）功能。
通常情況下，maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能后，用戶只能滾動屏幕，就能讓您的網站看上去更像原生應用的感覺。
注意，這種方式我們并不推薦所有網站使用，還是要看您自己的情況而定！
總結
以上是生活随笔為你收集整理的viewport是什么？(江湖称响应式web设计)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Request method 'GET'
- 下一篇： win_redis【win下安装使用re