更新時間:2021-03-26 來源:黑馬程序員 瀏覽量:
手機屏幕多種多樣,由于不同手機分辨率、屏幕寬高比都有可能不同,同一張圖片在不同手機中顯示的位置和大小,在視覺上存在差異,我們需要對不同的手機屏幕進行適配,使相同的程序邏輯在不同的屏幕上顯示的視覺效果一致,為此出現(xiàn)了視口的概念。
視口(Viewport) 是移動前端開發(fā)中一個非常重要的概念,最早是蘋果公司推出iPhone時發(fā)明的,為的是讓iPhone的小屏幕盡可能完整顯示整個網(wǎng)頁。不管網(wǎng)頁原始的分辨率尺寸多大,都能將其縮小顯示在手機瀏覽器上,這樣保證網(wǎng)頁在手機上看起來更像在桌面瀏覽器中的樣子。在蘋果引入視口的概念后,所有的移動開發(fā)者也都認同了這個做法。
為了方便讀者理解視口到底是什么,下面舉例進行說明。在網(wǎng)頁制作過程中,有時人們會使用百分比來聲明寬度,代碼如下:
<!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標準文檔中稱為初始包含塊,這個初始包含塊是所有CSS百分比寬度推算的根源。在PC桌面上,如果不對html和body元素設(shè)置margin和padding,那么html和body元素都與瀏覽器窗口的寬度一致。因此,這時,上述代碼中的div元素占瀏覽器寬度的50%。但是,由于移動設(shè)備的屏幕較小,在移動設(shè)備上,如果視口的寬度與瀏覽器窗口的寬度一致,在小的屏幕上呈現(xiàn)過多的內(nèi)容清晰度較差,例如的案例頁面內(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>
從上圖可以看出,網(wǎng)頁的內(nèi)容顯示模糊,這時大家也許想到了是否可以把網(wǎng)頁放大,通過移動網(wǎng)頁來看清上面的內(nèi)容,這就需要讓視口的寬度大于瀏覽器窗口的寬度,來達到網(wǎng)頁縮放的目的,下面將為大家詳細講解視口的設(shè)置方式。
在移動端瀏覽器當中,存在著3種視口:可見視口、布局視口(視窗視口)和理想視口。
可見視口與布局視口
可見視口是指設(shè)備的屏幕寬度(瀏覽器窗口寬度),布局視口是指網(wǎng)頁的寬度,如下圖所示。
在上圖中,設(shè)備屏幕是414像素的寬度,在瀏覽器中,414像素的屏幕寬度能夠展示1200像素寬度的內(nèi)容。那么414像素就是可見視口的寬度,而1200像素就是布局視口的寬度。
一般移動設(shè) 備的瀏覽器都默認設(shè)置了一個標簽,用來定義虛擬的布局視口,用于解決早期的頁面在手機上顯示的問題。iOS和Android基本都將這個視口分辨率設(shè)置為980像素,iPad和WinPhone設(shè)置為1024像素,所以PC端的網(wǎng)頁在這些設(shè)備上呈現(xiàn)時,元素看上去很小,一般默認可以通過手動縮放網(wǎng)頁。
為了讓用戶能夠看清晰設(shè)備中的內(nèi)容,開發(fā)者在通常情況下并不使用默認的viewport來展示,而是自定義配置視口的屬性,使視口和頁面的比例更加適當。
HTML5中,viewport元標簽是指標簽,標簽中用于設(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-scalable | yes/no | 定義是否允許用戶手動縮放頁面,默認值yes |
使用標簽配置視口屬性的方式如下:
<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0,maximum-scale=1.0">
猜你喜歡: