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