移動web開發(fā)之視口viewport_html/css

前面的話

　　在CSS標準文檔中，視口viewport被稱為初始包含塊。這個初始包含塊是所有CSS百分比寬度推算的根源，它給CSS布局限制了一個最大寬度。在桌面上，視口的寬度和瀏覽器窗口的寬度一致。而在移動端，視口分為布局視口(layout viewport)、視覺視口(visual viewport)和理想視口(ideal viewport)

布局視口

　　移動端設備的問題是，如果使視口的寬度和瀏覽器窗口寬度一樣會導致很丑陋的結果。移動端瀏覽器通常的寬度是240到640像素，且大多數設計給桌面的網站的寬度至少是800px。因此網站內容在手機上看起來會非常窄

　　//下圖是新浪網在手機端的顯示狀態(tài)，如果不進行縮放操作的話，文字幾乎是無法看清的

　　在手機上，視口與移動端瀏覽器屏幕寬度不再相關聯，而是完全獨立的。我們稱它為布局視口——CSS布局會根據它來計算，并被它約束

　　為了容納為桌面瀏覽器設計的網站，移動設備默認的布局視口寬度遠大于屏幕的寬度，設置為980px或1024px（也可能是其它值，這個是由設備自己決定的），但帶來的后果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區(qū)域的寬度是比這個默認的viewport的寬度要小的。下圖列出了一些設備上瀏覽器的默認viewport的寬度

　　document.documentElement.clientWidth/Height返回的是布局視口的尺寸

視覺視口

　　雖然獨立布局視口的創(chuàng)造很大程度地幫助了桌面網站到手機上的轉移，但我們不能完全無視移動端設備的屏幕尺寸。一些CSS聲明與用戶見到的東西有關，而與CSS的初始包含塊無關。并且，有時候知道用戶看到了網站的哪些部分對web開發(fā)者會有幫助

　　視覺視口是用戶正在看到的網站的區(qū)域，對于的javascript屬性是window.innerWidth/Height

　　[注意]安卓webkit2和代理瀏覽器存在兼容問題

　　縮放會影響視覺視口的大小。當縮放程度是100%時，視覺視口與設備屏幕一樣寬。放大使視覺視口變得更小，因為屏幕上顯示的CSS像素更小了，而縮小會讓視覺視口更大，因為屏幕上的CSS像素更多了。因此縮放程度和視覺視口的大小是逆相關的：放得越大，視覺視口越小　

　　以iphone5為例，瀏覽器布局視口的寬度默認是1024px，屏幕寬度只有640個設備像素，DPR為2，所以CSS像素是320px。現在用戶從100%放大到200%，CSS像素被放大，直到屏幕上只有160個CSS像素。但是，布局視口仍然保持在1024px，所以頁面中的元素并沒有改變大小。

　　[注意]當用戶縮放時，只有視覺視口的尺寸會發(fā)生改變，布局視口不會改變。移動端的縮放不會導致CSS布局被重新計算。由于在手機上會經常發(fā)生縮放，并且手機的處理器工作得很慢，電池消耗地很快，因此不重新進行布局對性能來說有很大的好處

　　//以下代碼表示3秒后，頁面縮放從100%到200%

理想視口

　　默認情況下，一個手機或平板瀏覽器的布局寬度是980或1024像素。雖然這能讓桌面網站不被壓扁，但是這并不理想，尤其對于手機用戶，因為在狹窄的屏幕上更適合一個狹窄的網站

　　換句話說，布局視口的默認寬度并不是一個理想的寬度。這就是為什么蘋果和其他效仿蘋果的瀏覽器廠商，會引進理想視口。它是對設備來說，最理想的布局視口尺寸。顯示在理想視口中的網站擁有最理想的瀏覽和閱讀的寬度，用戶剛進入頁面時也不再需要縮放

　　只有當網站是為手機準備的時候才應該使用理想視口。只有主動地往頁面里添加meta視口標簽時理想視口才會生效。如果沒有meta視口標簽聲明，那么布局視口將會維持它的默認寬度，理想視口只有當顯式地使用它的時候才會產生影響

//這一行代碼告訴瀏覽器，布局視口的寬度應該與理想視口的寬度一致

　　定義理想視口是瀏覽器的工作，而不是設備或操作系統(tǒng)的工作。因此，同一設備上的不同瀏覽器擁有不同的理想視口。例如，三星galaxy pocket上的安卓webkit的理想視口是320*427px，而opera mobile12的則是240*320px。但是，瀏覽器的理想視口的大小也取決于它所處的設備。三星galaxy s4上的chrome的理想視口是360*640px，但是在nexus7上，則是601*962px。原因很明顯：Nexus7是一個平板，它擁有更寬的屏幕，因此理想視口也應該更寬

　　screen.width/height返回是理想視口的尺寸

　　[注意]當設備方向改變時，iphone中理想視口screen.width/height的值并不會改變，但安卓設備會改變。而布局視口document.documentElement.clientWidth和視覺視口window.innerWidth的值，蘋果和安卓都會改變

meta視口

　　meta視口標簽存在的主要目的是讓布局視口的尺寸和理想視口的尺寸匹配。它由apple發(fā)明，其他手機和平板復制了它的大部分內容。桌面瀏覽器不支持，也不需要它，因為它們沒有理想視口的概念。IE是一個例外:在手機上它支持meta視口標簽，但最好使用@-ms-viewport

　　meta視口標簽應該被放在HTML文檔的中，并且按以下格式書寫:

　　每一個名/值對都是一個給瀏覽器發(fā)號命令的指令。它們被逗號分隔，共有6個

　　1、width:設置布局視口的寬度為特定的值
　　2、init-scale:設置頁面的初始縮放程度和布局視口的寬度
　　3、minimum-scale:設置了最小縮放程度(用戶可縮小的程度)
　　4、maxmum-scale:設置了最大縮放程度(用戶可放大的程度)
　　5、user-scalabel:是否阻止用戶進行縮放
　　6、height:設置布局視口的高度(未被實現)

width

　　【0】不設置寬度

　　例如，iPhone4S如果不設置viewport，他就會默認是980px，就像把屏幕分成980份。如果設置一個元素為100px*100px，看起來就是屏幕的100/980

　　【1】把布局視口的尺寸設為一個理想的值

　　假如，iPhone4S如果設置viewport width=device-width，他就會是320px，就像把屏幕分成320份。如果設置一個元素為100px*100px，看起來就是屏幕的100/320

　　【2】把布局視口的尺寸設為固定寬度

　　瀏覽器支持的最大值是10000個像素，最小值約為理想視口的20%，安卓webkit不允許任何小于布局視口的寬度。如果你指定了一個這樣的值，它會自動轉換為默認布局視口，通常是980px。IE10不允許任何超出480px的值，超出的話會自動轉換為布局視口的默認寬度1024px

initial-scale

　　initial-scale指令設置了頁面的初始縮放程度。1代表100%，2代表200%?？s放程度是根據理想視口來計算的

當前縮放值 = 理想視口寬度 / 視覺視口寬度

　　[注意]安卓自帶的webkit瀏覽器只有在 initial-scale = 1 以及沒有設置width屬性時才表現正常

　　縮放程度與視覺視口的寬度是逆相關的，越高的縮放程度意味著視覺視口越小。所以initial-scale=1時視覺視口尺寸和理想視口尺寸是一樣的。initial-scale=2會放大到200%，因此視覺視口的高寬是理想視口的一半

【默認值】

　　安卓設備上的initial-scale并沒有默認值，而在iphone和ipad上，無論viewport設置的寬度是多少，如果沒有指定默認的縮放值，則iphone和ipad會自動計算這個縮放值，以達到當前頁面不會出現橫向滾動條(或者說viewport的寬度就是屏幕的寬度)的目的　

【1】width=device-width,initial-scale=1

　　IE10中當initial-scale為1時，它在橫屏模式下寬度保持著320px，但width=device-width時它會從320px變?yōu)?80px

　　所以為了在所有瀏覽器上解決這個問題，需要使用

【2】width=400,initial-scale=1

　　把布局視口的寬度設為400px，然后再把它設為理想視口的寬度。結果瀏覽器選擇了每個方向最大的尺寸。因此早期的iphone手機在豎屏模式下的布局視口寬度是400px(320px和400px中較大的值)，在橫屏模式下是480px(480px和400px較大的值)

　　因此，可以給布局視口設置一個最小寬度，并在設備和方向上有需求時允許瀏覽器將布局視口設得更寬

minimum-scale和maximum-scale

　　沒有這些指令的時候，瀏覽器允許用戶的縮放級別達到5(20%-500%);有這些指令的時候，范圍可擴大到10(10%到1000%)。更高的縮放程度不被支持，因此設置maxmum-scale=20和設置maxmum-scale=10的效果是一樣的。安卓webkit不支持minimum-scale。同樣，它的縮放范圍是4(25%-400%)，并且不支持改變這個范圍

user-scalable

　　user-scalable=no表示禁止縮放

【改變meta視口標簽】

　　在大多數瀏覽器中，可以改變meta視口標簽，假設meta視口是文檔中的第一個meta標簽

var meta = document.getElementsByTagName('meta')[0];meta.setAttribute('content','width=400');

　　我們無法通過移除meta標簽來使布局視口變回它默認的寬度。但可以把它設為一個固定的值。例如，如果想提供"切換到桌面布局"的功能，可以把寬度設為980px或1024px

【常用meta視口標簽】

　　該meta標簽的作用是讓當前viewport的寬度等于設備的寬度，同時不允許用戶手動縮放

總結

　　在桌面瀏覽器中，瀏覽器窗口就是約束CSS布局的視口。而在手機端，布局視口會限制CSS布局；視覺視口表示瀏覽器的可視區(qū)域，決定用戶看到什么；理想視口是對于特定設備的特定瀏覽器的布局視口的一個理想尺寸

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com