DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> html meta viewport屬性說明
html meta viewport屬性說明
編輯:HTML和Xhtml     

什麼是Viewport

手機浏覽器是把頁面放在一個虛擬的“窗口”(viewport)中,通常這個虛擬的“窗口”(viewport)比屏幕寬,這樣就不用把每個網頁擠 到很小的窗口中(這樣會破壞沒有針對手機浏覽器優化的網頁的布局),用戶可以通過平移和縮放來看網頁的不同部分。移動版的 Safari  浏覽器最新引進了 viewport 這個 meta tag,讓網頁開發者來控制 viewport 的大小和縮放,其他手機浏覽器也基本支持。

Viewport 基礎

一個常用的針對移動網頁優化過的頁面的 viewport meta 標簽大致如下:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width:控制 viewport 的大小,可以指定的一個值,如果 600,或者特殊的值,如 device-width 為設備的寬度(單位為縮放為 100% 時的 CSS 的像素)。
height:和 width 相對應,指定高度。
initial-scale:初始縮放比例,也即是當頁面第一次 load 的時候縮放比例。
maximum-scale:允許用戶縮放到的最大比例。
minimum-scale:允許用戶縮放到的最小比例。
user-scalable:用戶是否可以手動縮放

關於viewport的一些問題

viewport並非只是ios上的獨有屬性,在android、winphone上同樣也有viewport。它們要解決的問題是相同的,即無視設備的 真實分辨率,直接通過dpi,在物理尺寸和浏覽器之間重設分辨率,這個分辨率和設備的分辨率無關。比如,你拿個3.5寸-320 *  480的iphone3 gs、3.5寸-640 *  960的iphone4或者9.7寸-1024*768的ipad2,雖然設備的分辨率不同,物理尺寸也不同,但你可以通過設置viewport讓它們在 浏覽器裡有相同的分辨率。比如說,你的網站是800px寬,你可以通過設置viewport的width=800,來讓你的網站在這三個不同的設備上都剛 好滿屏顯示你的網站。

以上的知識,相信每個對viewport稍有了解的同學應該都已經了解了。這不是我今天想說的重點。我想說明的是viewport在ios和android上的一些差異表現。

網上一搜關於viewport的知識,基本上全都是如下信息:

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

這段代碼的意思是,讓viewport的寬度等於物理設備上的真實分辨率,不允許用戶縮放。一都主流的web  app都是這麼設置的,它的作用其實是故意捨棄viewport,不縮放頁面,這樣dpi肯定和設備上的真實分辨率是一樣的,不做任何縮放,網頁會因此顯 得更高細膩。玩ps的同學應該都知道,當你將一張1000 * 1000的圖片直接縮放至500 * 500分變成什麼樣,對吧?圖片的失真一定逃不掉。

但我要做的一個應用卻恰恰相反,需要利用viewport,利用縮放。不論真實分辨率是多少,無論物理尺寸是多少,我都希望在浏覽器裡,能有統一的分辨 率,同時也不允許用戶縮放。我用來測試的設備有:iphone4、ipad2、htc的g11、不知道什麼廠商的aquos  phone(android系統)、華碩的android pad、dell的winphone然後我一路遇到了如下問題:

1)如果不顯示地設置viewport,那麼width的默認為980。如果頁面的所有元素寬度都小於980,此時width為980,如果頁面最 寬的位置超過980,那麼width等於最大寬度。總之,默認能將整個頁面從左到右顯示出來。如果設置了viewport,比如,只單純地設置了 user-scalable=no,例如<meta name="viewport" content="user-scalable=no"  />,那麼ios下width還是按980顯示(即默認就會通過dpi縮放),但android和winphone下卻不會再縮放了,浏覽器分辨率 和真實設置分辨率一致。

2)對於ios設備,設置width可以生效,但對於android,設置width並不會生效。ios設備,縮放的比率即dpi是通過你設置的 width和設置真實分辨率自動計算的,而android下你設置width無效,你能設置的是一個特殊的字段target-densitydpi,也就是說,有三個變量:浏覽器width、設備真實width、dpi。  我們簡單地用個公式來表達它們之間的關系吧(並非真實關系,簡單說明用) 設備真實width * dpi =  浏覽器width,這裡的三個變量,設備真實width是個我們不能操作的已知值,另外兩個變量我們可以設置一個來影響另一個,在ios中,我們能改的是 浏覽器width,dpi自動生成,而在android中,我們能改的是dpi,浏覽器width自動生成。對於android,無論我們如何設置 width,也不會對浏覽器width產生影響。

ps:這裡我另外再說一個奇怪的問題:在htc的g11裡(htc的手機我只有這一個,別的沒有測),如果設置了dpi而不顯示地設置width, 則user-scalable=no不生效,即是說:<meta name="viewport"  content="target-densitydpi=300,user-scalable=no"  />,無法阻止用戶縮放屏幕。我們需要顯示地設置一下width值,僅管這個值對android下的浏覽器分辨屏並不產生任何影響(對ios還是會 產生影響的),我們仍然要設置它,而且這個值一定要大於320,如果小於等於320,也無法使user-scalable=no生效。這個問題只在htc 的g11手機上出現,在aquos  phone沒有這個問題。兼容android真是件頭痛的事  @_@,未來還不知道有多少坑呢。而在winphone上,結果就更奇怪了:我給viewport的width設一個大於480的值,user- scalable=no就失效了,而設一個小於480的值,user-scalable=no能生效。但無論我給viewport的width設多少值, 對winphone真正顯示的width卻並不產生我預期的影響,通過target-densitydpi也沒有影響。設置width,如果小於480的 話,屏幕會縮放,但縮小的比例卻和我預期完全不一樣,我不知道它是按照什麼規律縮放的。不知道這是winphone的問題,還是dell實現的問題。

3)這一條和上一條應該是直接相關的:ios設備在橫豎屏時,會自動調整dpi,無論橫屏還是豎屏,都能保證浏覽器width等於viewport 中設置的值,所以橫豎屏的時候,頁面裡顯示的內容的大小是會自動縮放產生變化的。而android手機在橫豎屏的時候,不會改變dpi,在橫豎屏的時候, 網頁不會產生縮放。也正因此,ios可以保證橫豎屏頁面都不會產生滾動條,滿屏顯示,而android卻無法保證這一點,橫著滿屏則豎著無法滿屏,反之亦 然。

4)對於ios設備,如果width顯示定義了,而頁面最寬的位置超過width的話,width無效,仍按最寬的寬度來顯示(不會有滾動條)。但 此時會出現一個很奇怪的問題,當你將手機橫豎屏切換幾次之後,會發現你的頁面自動放大了,出現了滾動條,但其實放大後的寬度其實和你設的width也並沒 有關系。為了防止這種情況出現,你需要將width的寬度設置得比頁面最寬的地方更大,或者相同。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved