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 constantIf 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 widthYou 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
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
