Usage:
<meta name= "viewport" content= "width=device-width, initial-scale=1.0"/>
We use a Web page to test the content of the original page without viewport tags:
<!doctype html>
The results show the following figure:When not marked, the browser will think that the default width of the site is 980, so that the text displayed is very small, can not read, can only be viewed by magnifying the page.
Of course, we can also browse by telling the browser that the page is for mobile. By setting the width of the viewport equal to the "Device width" (width=device-width), tell the browser that the handset device width is 320px, not the default 980px value. If we set the width = width=320 will achieve the same display results on the iphone and some other smartphones, but not all phones have the exact width, so it's best to simply set the width of the device and let the phone browser figure it out.
Then, we add the viewport tag to the Web page, which reads as follows:
<!doctype html>
Show Results:The viewport meta tag is supported by many smartphones, from iphone to Android's webOS (PALM) and even opera Mini and opera Mobile in InternetExplorer Mobile.
The following is the viewport mark on the m.yahoo.com
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no"/>In the above code, users are not allowed to zoom, you can also allow users to scale themselves, the code is as follows:
<meta name= "viewport" content= "width=device-width, initial-scale=1.0"/>Since the viewport tag is not supported by all browsers, when the above code is not valid, you can try to do it in other ways, as follows:
<meta name= "handheldfriendly" content= "true"/>
Or<meta name= "mobileoptimized" content= "/>"Finally, if the DOCTYPE on your Web page is XHTML-MP or WML, your site will be identified as a mobile optimization site.
Rule properties on Android
The official Android document lists a special attribute that Android has added to the META tag: target-densitydpi. This property allows developers to specify whether the screen resolution page has been developed, or more specifically how to handle the media, such as image scaling.
Here's an example of an Android viewport tag:<meta name= "viewport" content= "target-densitydpi=device-dpi"/>
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
