如今手機瀏覽器的顯示分辨率與桌面瀏覽器差很少,可是手機的尺寸比電腦要小不少。一個沒作過響應式處理的網站,在手機和電腦上顯示徹底同樣的內容, 不可避免的會出現字體被縮小的現象。想象一下電腦裏12號字體縮小好幾倍的效果吧。 因此若是將web網頁移植爲wap應用上,仍是有許多問題須要考慮。css
作過wap開發的都知道 html的 <meta name=」viewport」> ,這是一個從iphone引入的meta,如今幾乎全部手機瀏覽器都支持。下邊要講的 viewport 是從手機瀏覽器的角度出發,而不是html,請不要混淆。html
把 viewport 分爲2個方面來學習,更有助於理解它的原理:html5
想象有個房間,你能夠操控它放大變小,如今你站在它的窗戶前。正對着窗戶的牆壁塗滿了壁畫,你走到離窗口1米的位置往房間裏看,假設房間如今很大很 大,你能看到對面牆壁上的整個壁畫,可是由於距離太遠了,你看不清壁畫上的題詞,因而你讓房間縮小,縮小到壁畫離你很近,近到能看清壁畫上的細節。在這裏 窗戶就是 visual viewport
。牆壁就是 layout viewport
web
對應到手機瀏覽器,visual viewport就是當前顯示給用戶內容的窗口,你能夠拖動或者放大縮小網頁,來看清楚網頁的內容。layout viewport 有網頁的全部內容,他能夠所有或者部分展現給用戶。瀏覽器
對於css佈局,特別是用寬度百分比作排版的時候,比率是按照layout viewport 來計算的。也就是說若是一個div相對的寬度50%,用戶在手機瀏覽器放大縮小,DIV的寬度不會一直顯示相對於窗口50%,這個div可能會填滿整個窗 口或小到看不見。(能夠電腦和手機分別體驗一下這個網址:http://zhaoyuhao.com/demo/34.html)iphone
那麼layout viewport有多寬?不一樣的設備、不一樣的瀏覽器都不相同。 Safari瀏覽器爲980px,Opera 850px,Android WebKit 800px, IE 974px.(手機像素寬度、瀏覽器像素、設備像素是不一樣的概念,這個須要注意.)佈局
原文對於這二者還有一些其餘的分析,不過不是什麼重點,就不翻了學習
上文提到有2個viewport,分別有2對屬性值對應這二者。(這裏有個故事,按道理桌面瀏覽器是隻須要一個屬性對的,但是因爲瀏覽器大戰致使出現了不一樣標準,恰好手機瀏覽器用上了,也算是一種應禍得福吧。)測試
layout viewport 的 長寬 (document.documentElement.clientWidth / document.documentElement.clientHeight)字體
visual viewport 的 長寬 (window.innerWidth / window.innerHeight)
screen 的大小其實就是設備的像素大小,在針對桌面瀏覽器的開發中,這個數值不重要,你不須要關係電腦屏幕的像素,可是對於wap開發,這個數值有它的含義,由於手機瀏覽器寬度=設備寬度,能夠經過他們的比例計算到頁面的縮放比例
screen.width/height
咱們有時候要知道visual viewport與layout viewport的相對距離 :
window.pageXOffset window.pageYOffset
Media queries 是html5的特性 能夠根據 device-width(設備的寬度 screen.width) 來肯定顯示不一樣CSS。
我在IPHONE4S – CHROME 瀏覽器 ,測試結果以下:
1
2
3
|
1. visual viewport 寬度 : 默認980 實際大小與縮放比例相關,能夠經過meta的viewport屬性修改
2. layout viewport 寬度 : 980
3. screen.width :320
|
可見IPHONE4S 在作響應設計的時候 ,width應該是320px。
你也能夠在 http://zhaoyuhao.com/demo/35.html 測試你設備的狀況
最後,咱們討論下 <meta name=」viewport」 content=」width=device-width」> 還記得以前窗戶和壁畫的例子麼?設置viewport就至關於放大和縮小房間,找到合適的像素給用戶最好的體驗。
咱們一步步分析:
1.假設你有個簡單的頁面,不給裏面的DIV設置寬度,默認是相對於 layout viewport 的 100%。對於iphone4S而言,這個寬度的數值是980,因此顯示出來的效果是這樣
2.用戶經過放大網頁比率,縮小visual viewport的值,相對的用戶就能看清楚DIV裏的內容,可是layout viewport並無變,因此會出現下邊的效果,部分文檔顯示在了瀏覽器外邊,須要經過滾動條查看所有文檔
3.因此爲了解決這個問題,引入了viewport標籤。當你看到 <meta name=」viewport」 content=」width=device-width」> 說明這個網頁把layout viewport的像素設置成了設備的像素,這樣實現了 visual viewport = layout viewport = screen.width的最佳體驗。
文中viewport的介紹不肯定是全部瀏覽器產商實現瀏覽器的原理,可是對於wap開發人員而言頗有幫助。
轉自:http://blog.jobbole.com/44903/