首頁(yè)技術(shù)文章正文

什么是視口？為什么會(huì)有視口？

更新時(shí)間:2021-03-26 來(lái)源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif


視口為什么會(huì)出現(xiàn)？

手機(jī)屏幕多種多樣，由于不同手機(jī)分辨率、屏幕寬高比都有可能不同，同一張圖片在不同手機(jī)中顯示的位置和大小，在視覺上存在差異，我們需要對(duì)不同的手機(jī)屏幕進(jìn)行適配，使相同的程序邏輯在不同的屏幕上顯示的視覺效果一致，為此出現(xiàn)了視口的概念。

如何理解視口？

視口(Viewport) 是移動(dòng)前端開發(fā)中一個(gè)非常重要的概念，最早是蘋果公司推出iPhone時(shí)發(fā)明的，為的是讓iPhone的小屏幕盡可能完整顯示整個(gè)網(wǎng)頁(yè)。不管網(wǎng)頁(yè)原始的分辨率尺寸多大，都能將其縮小顯示在手機(jī)瀏覽器上，這樣保證網(wǎng)頁(yè)在手機(jī)上看起來(lái)更像在桌面瀏覽器中的樣子。在蘋果引入視口的概念后，所有的移動(dòng)開發(fā)者也都認(rèn)同了這個(gè)做法。 為了方便讀者理解視口到底是什么，下面舉例進(jìn)行說(shuō)明。在網(wǎng)頁(yè)制作過(guò)程中，有時(shí)人們會(huì)使用百分比來(lái)聲明寬度，代碼如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>demo</title>
</head>
<body>
<header>header</header>
<div style="width: 50%"></div>
</body>
</html>

在上述代碼中，div是body的子元素，設(shè)置style="width: 50%"就表示該div占body寬度的50%，而body沒有顯示聲明寬度，因此body占用了父包含塊(視口) html元素寬度的100%。同樣，html 也沒顯示聲明寬度，因此html元素也占父包含塊的100%。

視口在CSS標(biāo)準(zhǔn)文檔中稱為初始包含塊，這個(gè)初始包含塊是所有CSS百分比寬度推算的根源。在PC桌面上，如果不對(duì)html和body元素設(shè)置margin和padding，那么html和body元素都與瀏覽器窗口的寬度一致。因此，這時(shí)，上述代碼中的div元素占瀏覽器寬度的50%。但是，由于移動(dòng)設(shè)備的屏幕較小，在移動(dòng)設(shè)備上，如果視口的寬度與瀏覽器窗口的寬度一致，在小的屏幕上呈現(xiàn)過(guò)多的內(nèi)容清晰度較差，例如的案例頁(yè)面內(nèi)容如果在iPhone6設(shè)備上呈現(xiàn)，效果如下圖所示。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>demo</title>
 <style type="text/css">
 body>*{ width:95%; height:auto; margin:0 auto; margin-top:10px;border:1px solid #000; padding:5px; }
 header{ height:50px; }
 section{ height: 300px; }
 footer{ height:30px;}
 section>*{ height:100%; border:1px solid #000; float:left; }
 aside{ width:25.510204%; /*250÷980*/}
 article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}
 </style>

</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
 <aside>aside</aside>
 <article>article</article>
</section>
<footer> footer</footer>
</body>
</html>

 

1616724356838_視口.png


從上圖可以看出，網(wǎng)頁(yè)的內(nèi)容顯示模糊，這時(shí)大家也許想到了是否可以把網(wǎng)頁(yè)放大，通過(guò)移動(dòng)網(wǎng)頁(yè)來(lái)看清上面的內(nèi)容，這就需要讓視口的寬度大于瀏覽器窗口的寬度，來(lái)達(dá)到網(wǎng)頁(yè)縮放的目的，下面將為大家詳細(xì)講解視口的設(shè)置方式。

 

移動(dòng)端的3種視口

在移動(dòng)端瀏覽器當(dāng)中，存在著3種視口：可見視口、布局視口(視窗視口)和理想視口。


可見視口與布局視口


可見視口是指設(shè)備的屏幕寬度(瀏覽器窗口寬度)，布局視口是指網(wǎng)頁(yè)的寬度，如下圖所示。

1616724639135_視口效果.png

在上圖中，設(shè)備屏幕是414像素的寬度，在瀏覽器中，414像素的屏幕寬度能夠展示1200像素寬度的內(nèi)容。那么414像素就是可見視口的寬度，而1200像素就是布局視口的寬度。
一般移動(dòng)設(shè) 備的瀏覽器都默認(rèn)設(shè)置了一個(gè)標(biāo)簽，用來(lái)定義虛擬的布局視口，用于解決早期的頁(yè)面在手機(jī)上顯示的問(wèn)題。iOS和Android基本都將這個(gè)視口分辨率設(shè)置為980像素，iPad和WinPhone設(shè)置為1024像素，所以PC端的網(wǎng)頁(yè)在這些設(shè)備上呈現(xiàn)時(shí)，元素看上去很小，一般默認(rèn)可以通過(guò)手動(dòng)縮放網(wǎng)頁(yè)。
為了讓用戶能夠看清晰設(shè)備中的內(nèi)容，開發(fā)者在通常情況下并不使用默認(rèn)的viewport來(lái)展示，而是自定義配置視口的屬性，使視口和頁(yè)面的比例更加適當(dāng)。
HTML5中，viewport元標(biāo)簽是指標(biāo)簽，標(biāo)簽中用于設(shè)置視口的常用屬性如下表所示。

屬性取值描述
width正整數(shù) 或device-width定義視口的寬度，單位為像素
height正整數(shù) 或device-height定義視口的高度，單位為像素，一般不用
initial-scale[0.0-10.0]定義初始縮放值
minimum-scale[0.0-10.0]定義縮小最小比例，它必須小于或等干maximum-scale 設(shè)置
maximum-scale[0.0-10.0]定義放大最大比例，它必須大于或等于minimum-scale 設(shè)置
user-scalableyes/no定義是否允許用戶手動(dòng)縮放頁(yè)面，默認(rèn)值yes

使用標(biāo)簽配置視口屬性的方式如下：

<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0,maximum-scale=1.0">


猜你喜歡：

如何設(shè)置視口？

視口設(shè)置時(shí)content屬性常用參數(shù)

如何設(shè)置視口？

布局視口、視覺視口和理想視口分別是什么？

黑馬程序員web前端培訓(xùn)

分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！