HTML meta viewport屬性說明
什麼是Viewport
手機瀏覽器是把頁面放在一個虛擬的“窗口”(viewport)中,通常這個虛擬的“窗口”(viewport)比屏幕寬,這樣就不用把每個網頁擠 到很小的窗口中(這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局),用戶可以通過平移和縮放來看網頁的不同部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag,讓網頁開發者來控制 viewport 的大小和縮放,其他手機瀏覽器也基本支持。
Viewport 基礎
一個常用的針對移動網頁優化過的頁面的 viewport meta 標籤大致如下:
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的知識,基本上全都是如下信息:
這段代碼的意思是,讓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,例如
,那麼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不生效,即是說:
,無法阻止用戶縮放屏幕。我們需要顯示地設置一下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的寬度設置得比頁面最寬的地方更大,或者相同。
相關文章
-
Efforts Urged to Improve Womens Reproductive Health英語閱讀
Efforts Urged to Improve Women's Reproductive HealthParliamentarians from over 100 countries are being urged to take action in improving women's reproductive health ahead of the 2015 deadline -
The most important festival英語作文
Spring Festival is the most important festival in China ’s to celebrate the lunar calendar ‘s new year the evening before the Spring Festival ,families get together and have a big meal many places -
The Development of a Private Car英語作文
在我們平凡的日常裏,大家對作文都再熟悉不過了吧,作文是經過人的`思想考慮和語言組織,通過文字來表達一個主題意義的記敘方法。相信寫作文是一個讓許多人都頭痛的問題,下面是小編爲大家整理的The Development of a Privat -
Jolie drops battle over perfume named Shilohy英語作文
自願退學申請書怎麼寫2022 篇1敬愛的院領導:你們好!我感謝學院給我這樣一個低分考生讀大學的機會,承蒙這1年來學院的培養和教導。在輕鬆愉快的學習氛圍下,我萌發了退學的想法,考慮再三,現正要將此想法付誅行動。後經過輔導 -
Will Robot Take the Place of Men英語作文
Many years ago, as the development of technology, robot was created to facilitate peoples work. Robot can do many things for men, like it will accept the order and then carry out it. The most obvious -
i still remember that halloween英語作文
Days and days past, I’m not a child any longer. But I still remember that halloween, 31st october xx. That was saturday. I went to study english with an american girl named debby as usual. We had 5 s -
英語高分作文:The importance of protecting the environment
在日常學習、工作抑或是生活中,大家或多或少都會接觸過作文吧,作文根據體裁的不同可以分爲記敘文、說明文、應用文、議論文。如何寫一篇有思想、有文采的作文呢?以下是小編收集整理的設計作文400字5篇,歡迎大家借鑑與參考 -
How to make a fruit platter英語作文
We need to prepare some delicious fruits, such as round orange, golden pineapple, yellow banana, bright cherry tomatoes, green and green plums, deep pink bayberry, red apple, etc. we also need to prep -
Module 7 Travel Unit 2 We are going to visit the Ming Tombs
教材分析本節課主要學習如何表達旅行計劃。旨在讓學生學習一些新的單詞,學會句型“wearegoingto……”,懂得表達自己的'旅行計劃,瞭解祖國的一些景點,學會關心他人,同時,對學生進行熱愛祖國大好河山的教育。學情分析1.課堂 -
八年級英語下冊Unit 6 An old man tried to move a Mountain period one說課稿
尊敬各位老師,各位同學,大家好。今天我說課的內容是人教版新目標八年級英語下冊Unit 6 An old man tried to move a Mountain period one,我的說課包括:一、 說教材(一)教材的地位的作用本單元討論的主題是“傳說和故事”,其