首頁 > 開發者 > Windows Phone

windows Phone 瀏覽器視窗的尺寸

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
windows phone support phone number windows 7 phone support windows phone support number windows phone email setup windows 10 phone number microsoft windows 10 phone windows phone support number
相關文章
細數 Windows Phone 滅亡的七宗罪（過程很詳細，評論很精彩，但主要還是因為太慢了，生態跟不上，太貪了，廠商不願...
Windows Phone開發（19）：三維透視效果
Windows Phone開發（20）：當MediaElement和VideoBrush合作的時候
Windows Phone開發（15）：資源
Windows Phone開發（22）：啟動器與選取器之BingMapsDirectionsTask
Windows Phone開發（21）：做一個簡單的繪圖板

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More