Size of Windows Phone browser window

Source: Internet
Author: User

Mobile devices typically have a much smaller screen than PCs, and a mobile device's browser maps a larger "virtual" window to a mobile device's screen, then scales at a certain scale (3:1 or 2:1). That is, when we load a normal Web page, the mobile browser will first load the Web page in the browser standard and then zoom out to the width of the device pixel. Note that this reduction is a global narrowing, which means that all elements on the page will shrink. As shown, the effect of a regular article page on the mobile device:

Below is an example of a Web page with a width of 1024 pixels.

<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xh Tml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metacontent= "text/html; charset=utf-8"http-equiv= "Content-type" /><title>Viewport Test</title><styletype= "Text/css">. Auto-style1{font-size:Large;Color: White;}</style></Head><Body><Divstyle= "POSITION:ABSOLUTE;TOP:0PX;LEFT:0PX;WIDTH:1024PX; Height:1024px;background-color:gray ">    <Pstyle= "Text-align:right"class= "Auto-style1">1024px</P></Div><Divstyle= "position:absolute;top:0px;left:0px;width:480px; Height:480px;background-color:green ">    <Pstyle= "Text-align:right"class= "Auto-style1">480px</P></Div><Divstyle= "position:absolute;top:0px;left:0px;width:320px; Height:320px;background-color:maroon ">    <Pstyle= "Text-align:right"class= "Auto-style1">320px</P></Div><Divstyle= "position:absolute;top:0px;left:0px;width:240px; Height:240px;background-color:navy ">    <Pstyle= "Text-align:right"class= "Auto-style1">240px</P></Div></Body></HTML>

On the Windows Phone, the effect appears as follows:

Set the viewport width of a constant

If your site wants to use a specific viewport width, setting a hard-coded value for viewport in a Web page will give you the desired behavior, independent of the device or screen resolution, and the browser adjusts the initial zoom scale to display the content in the virtual viewport.

For example, if we use the following settings

<name= "Viewport"  content= "width=320"/>

In portrait mode, the display looks like this.

In landscape mode, display as.

If you set it back to

<name= "Viewport"  content= "width=480"/>

The display effect is

Dynamic viewport width

You can choose the actual viewport width by setting the value to device-width to allow IE browser. This value tells the browser that the Web page can accommodate multiple resolutions, which allows the browser to change the layout of the content immediately when the direction changes.

Inside the Windows Phone 7 browser, when vertical layout, viewport width is 320px, horizontal layout, width is 480px.

We can change the setting to

<name= "Viewport"  content= "width=device-width"/> 

Now, when vertical, our page effect becomes the following effect

After the screen is rotated, the dimensions change as we expect.

Original address: Http://blogs.windows.com/windows_phone/b/wpdev/archive/2011/03/14/managing-the-windows-phone-browser-viewport.aspx

Apple's developer site has a detailed description: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/ Safariwebcontent/usingtheviewport/usingtheviewport.html

Mozilla also has a note: Https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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