萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 在用HTML5開拓手機應用或手機網頁時
在用HTML5開拓手機應用或手機網頁時
在用HTML5開拓手機應用或頁時，<head>部門總會有如下一段代碼，這段代碼到底什麼意思呢。在網上，各人會獲得許多謎底。我從網上匯集了部門先容，清算一下，以留備用。
什麼是Viewport手機賞識器是把頁面放在一個假造的“窗口”（viewport）中，凡是這個假造的“窗口”（viewport）比屏幕寬，這樣就不消把每個網頁擠到很小的窗口中（這樣會粉碎沒有針敵手機賞識器優化的網頁的機關），用戶可以通過平移和縮放來看網頁的差異部門。移動版的 Safari 賞識器最新引進了 viewport 這個 meta tag，讓網頁開拓者來節制 viewport 的巨細和縮放，其他手機賞識器也根基支持。
width：節制 viewport 的巨細，可以指定的一個值，假如 600，可能非凡的值，如 device-width 為裝備的寬度（單元為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也等於當頁面第一次 load 的時辰縮放比例。
maximum-scale：應承用戶縮放到的最大比例。
minimum-scale：應承用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放
“viewport”，翻譯為中文可以叫做“視區”，各人都知道移動裝備的屏幕一樣平常都比PC小許多，webkit賞識器會將一個較大的“假造”窗口映射到移動裝備的屏幕上，默認的假造窗口為980像素寬（今朝大部門網站的尺度寬度），然後按必然的比例（3：1或2：1）舉辦縮放。也就是說當我們加載一個平凡網頁的時辰，webkit會先以980像素的賞識器尺度加載網頁，然後再縮小為490像素的寬度。留意這個縮小是一個全局縮小，也就是頁面上的全部元素城市縮小。如下圖所示，一個平凡的文章頁面在移動裝備的結果：
頁面以980像素加載，沒有變形，可是按比例縮放後，許多對象用肉眼根基看不清了。
那麼我們能不能工錢改變webkit的視區呢？雖然能，在<head>與</head>之間加上如下視區代碼：
我們來看看頁面加上逼迫視區巨細呼吁後結果怎麼樣？ 如下圖所示：
那麼有沒有更好的要領呢？好比說我們自動檢測移動裝備屏幕巨細，然後讓內容自順應。看下面的代碼，device-width將自動檢測移動裝備的屏幕寬度：
參考資料：
(
