Http://www.web-tinker.com/question/236.html
118.26.60 .*
2013-01-07 17:49:12
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">After the DTD is set, you can use viewport to disable page scaling.
<meta name="viewport" content="user-scalable=0" />However, for better compatibility, we will use the complete viewport settings.
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />For more details about viewport, see MDN.
When developing a mobile app with HTML5, users will often encounter different resolution or screen sizes of mobile phones. How can we make the developed app or page size suitable for various mobile phones? Viewport in html5.
Viewport Syntax:<! -HTML document->
<Meta name = "viewport"
Content ="
Height = [pixel_value | device-height],
Width = [pixel_value | device-width],
Initial-scale = float_value,
Minimum-scale = float_value,
Maximum-scale = float_value,
User-scalable = [Yes | no],
Target-densitydpi = [dpi_value | device-DPI | high-DPI | medium-DPI | low-DPI]
"
/>
Parameter description:
Width-- Controls the viewport size. You can specify a value or a special value. For example, if device-width is the width of the device, the unit is the CSS pixel when the unit is scaled to 100% ).
Height-- Corresponds to width and specifies the height.
Target-densitydpi-- The pixel density of a screen is determined by the screen resolution, which is usually defined as the number of dots per inch (DPI ). Android supports three types of screen pixel density: Low pixel density, medium pixel density, and high pixel density. A screen with a low pixel density has fewer pixels per inch, while a screen with a high pixel density has more pixels per inch. By default, the android browser and webview screens are of medium pixel density.
The following is the value range of the target-densitydpi attribute.
Device-DPI: uses the original DPI of the device as the target DP. No Default scaling occurs.
High-DPI: Uses hdpi as the target DPI. Devices with medium pixel density and low pixel density are reduced accordingly.
Medium-DPI: Use mdpi as the target DPI. Devices with high pixel density are scaled up, while devices with high pixel density are scaled down. This is the default target density.
Low-DPI: Use mdpi as the target DPI. Devices with medium and high pixel density are scaled up accordingly.
<Value>: specify a specific DPI value as the target DPI. The value range must be between 70.
<! -HTML document->
<Meta name = "viewport" content = "target-densitydpi = device-DPI"/>
<Meta name = "viewport" content = "target-densitydpi = high-DPI"/>
<Meta name = "viewport" content = "target-densitydpi = medium-DPI"/>
<Meta name = "viewport" content = "target-densitydpi = low-DPI"/>
<Meta name = "viewport" content = "target-densitydpi = 200"/>
To prevent the android browser and webview from scaling your page based on the pixel density of different screens, you can set the target-densitydpi of viewport to device-DPI. When you do this, the page will not be scaled. On the contrary, the page is displayed based on the pixel density of the current screen. In this case, you also need to define the width of the viewport to match the width of the device so that your page can adapt to the screen.
Initial-Scale-- Initial scaling. That is, the initial Page scaling degree. This is a floating point value and a multiplier of the page size. For example, if you set the initial scale to 1.0, the web page will be displayed at of the target density resolution. If you set it to "2.0", the page will be enlarged to 2 times.
Maximum-Scale-- Maximum scaling. That is, the maximum scale allowed. This is also a floating point value that specifies the maximum multiplier between the page size and the screen size. For example, if you set this value to "2.0", the page can be up to two times larger than the target size.
User-scalable-- The user adjusts the scaling. That is, whether the user can change the page zoom degree. If it is set to yes, the user is allowed to change it, and vice versa. The default value is yes. If you set it to no, both minimum-scale and maximum-scale will be ignored because scaling is impossible at all.
All zooming values must be within the range of 0.01-10.
Example: 1. Set the screen width to the device width and disable manual scaling.
<Meta name = "viewport" content = "width = device-width, user-scalable = No"/>
2. Set the screen density to high-frequency, medium-frequency, and low-frequency auto scaling. manual scaling is prohibited.
<Meta name = "viewport" content = "width = device-width, target-densitydpi = high-DPI, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = No "/>
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
