首頁 > 開發者 > Windows Phone
標籤：style blog http color 使用 os
行動裝置的螢幕一般都比PC小很多，行動裝置的瀏覽器會將一個較大的 “虛擬” 視窗映射到行動裝置的螢幕上，然後按一定的比例（3：1或2：1）進行縮放。也就是說當我們載入一個普通網頁的時候，行動瀏覽器會先以瀏覽器標準載入網頁，然後再縮小為裝置像素的寬度。注意這個縮小是一個全域縮小，也就是頁面上的所有元素都會縮小。如所示，一個普通的文章頁面在行動裝置的效果：
下面看一個樣本，下面的網頁寬度為 1024 像素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Viewport Test</title><style type="text/css">.auto-style1 { font-size: large; color:white;}</style></head><body><div style="position:absolute;top:0px;left:0px;width:1024px; height:1024px;background-color:gray"> <p style="text-align:right" class="auto-style1">1024px</p></div><div style="position:absolute;top:0px;left:0px;width:480px; height:480px;background-color:green"> <p style="text-align:right" class="auto-style1">480px</p></div><div style="position:absolute;top:0px;left:0px;width:320px; height:320px;background-color:maroon"> <p style="text-align:right" class="auto-style1">320px</p></div><div style="position:absolute;top:0px;left:0px;width:240px; height:240px;background-color:navy"> <p style="text-align:right" class="auto-style1">240px</p></div></body></html>
在 Windows Phone 上，顯示的效果如下所示：
設定常量的 viewport 寬度
如果你的網站希望使用特定的 viewport 寬度，在網頁中為 viewport 設定一個硬式編碼值就會得到你期望的行為，不依賴裝置或者螢幕的解析度，瀏覽器會調整初始的縮放比例將內容顯示在虛擬視口中。
例如，如果我們使用下面的設定
<meta name="viewport" content="width=320" />
在豎屏模式下，顯示效果如下。
在橫屏模式下，顯示為。
如果重新設定為
<meta name="viewport" content="width=480" />
顯示效果為
動態視口寬度
你可以通過將值設定為 device-width，讓 IE 瀏覽器來選擇實際的視口寬度。這個值告訴瀏覽器，網頁可以適應多種解析度，這就使得在方向發生變化的時候，瀏覽器可以立即改變內容的布局。
在 Windows Phone 7 瀏覽器內部，在豎向布局的時候，視口寬度為 320px, 橫向布局的時候，寬度為 480px。
我們可以將設定修改為
<meta name="viewport" content="width=device-width" />
現在，豎向的時候，我們的網頁效果成為如下效果
在旋轉螢幕之後，尺寸會如我們期望的發生變化。
原文地址: http://blogs.windows.com/windows_phone/b/wpdev/archive/2011/03/14/managing-the-windows-phone-browser-viewport.aspx
蘋果的開發人員網站有一篇詳細的說明：https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Mozilla 也有一篇說明：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
