手機(jī)瀏覽器Viewport 參數(shù)(web前端設(shè)計(jì))
發(fā)布時(shí)間：2013-04-08 16:59:03 作者：佚名 
我要評(píng)論
我要評(píng)論手機(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è)的不同部分。移
手機(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è)的不同部分。移動(dòng)版的 Safari 瀏覽器最新引進(jìn)了 viewport 這個(gè) meta tag，讓網(wǎng)頁(yè)開(kāi)發(fā)者來(lái)控制 viewport 的大小和縮放，其他手機(jī)瀏覽器也基本支持。
Viewport 基礎(chǔ)
一個(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, maximum-scale=1″>
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)縮放 yes or no
Viewport 基礎(chǔ)
一個(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, maximum-scale=1″>
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)縮放 yes or no
相關(guān)文章
像素密度與CSS3的viewport在移動(dòng)端Web響應(yīng)式布局中的運(yùn)用
viewport是CSS3中調(diào)整縮放的利器,特別適用于移動(dòng)端Web界面的操作與布局,接下來(lái)我們就來(lái)詳解像素密度與CSS3的viewport在移動(dòng)端web響應(yīng)式布局中的運(yùn)用.2016-05-27HTML5移動(dòng)端開(kāi)發(fā)中的Viewport標(biāo)簽及相關(guān)CSS用法解析
這篇文章主要介紹了HTML5移動(dòng)端開(kāi)發(fā)中的Viewport標(biāo)簽及相關(guān)CSS用法解析,Viewport常被叫做視口或視區(qū),在移動(dòng)端布局和屏幕適配中有著重要的作用,需要的朋友可以參考下2016-04-15簡(jiǎn)單總結(jié)CSS3中視窗單位Viewport的常見(jiàn)用法
這篇文章主要介紹了CSS3中視窗單位Viewport的常見(jiàn)用法,包括視窗的高度寬度及垂直居中等基本設(shè)定方法,需要的朋友可以參考下2016-02-04網(wǎng)頁(yè)寬度自動(dòng)適應(yīng)手機(jī)屏幕寬度的實(shí)現(xiàn)代碼(viewport)
這篇文章主要介紹了網(wǎng)頁(yè)寬度自動(dòng)適應(yīng)手機(jī)屏幕寬度的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-08-11meta標(biāo)簽中的viewport控制設(shè)備屏幕css
meta標(biāo)簽中的viewport可以控制設(shè)備屏幕的高度、寬度、初始的縮放比例等等，喜歡的朋友可以了解下2014-08-22meta標(biāo)簽中的使用viewport定義屏幕css
meta標(biāo)簽中的viewport可以設(shè)置屏幕的css樣式，包括寬、高、初始縮放比例等等2014-07-28html網(wǎng)頁(yè)中meta viewport屬性說(shuō)明
這篇文章主要介紹了html網(wǎng)頁(yè)中meta viewport屬性說(shuō)明,需要的朋友可以參考下2014-05-07- 這篇文章主要介紹了html的meta viewport屬性說(shuō)明,需要的朋友可以參考下2014-04-16
HTML meta viewport屬性詳細(xì)說(shuō)明
viewport并非只是ios上的獨(dú)有屬性，在android、winphone上同樣也有viewport，下面為大家詳細(xì)介紹下HTML meta viewport2014-03-12- 隨著高端手機(jī)(Andriod,Iphone,Ipod,WinPhone等)的盛行，移動(dòng)互聯(lián)應(yīng)用開(kāi)發(fā)也越來(lái)越受到人們的重視，用html5開(kāi)發(fā)移動(dòng)應(yīng)用是最好的選擇。然而，每一款手機(jī)有不同的分辨率，不2013-12-02