Viewport use in html5 development_html5 tutorial skills

With the popularity of high-end mobile phones (Andriod, Iphone, Ipod, WinPhone, etc.), mobile Internet application development has attracted more and more attention. Using html5 to develop mobile applications is the best choice. However, each mobile phone has a different resolution and screen size. How can we make the application or page size we develop suitable for various high-end mobile phones? Learning the use of html5 viewport can help you do this... Introduction to viewport syntax:

Copy code The code is as follows: 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] " /> width Control the size of the viewport. You can specify a value or a special value. For example, device-width is the width of the device (the unit is CSS pixels when scaling to 100%).

height corresponds to width and specifies the height.

target-densitydpi A screen pixel density is determined by the screen resolution, usually defined as the number of dots per inch (dpi). Android supports three screen pixel densities: low pixel density, medium pixel density, and high pixel density. A low pixel density screen has fewer pixels per inch, while a high pixel density screen has more pixels per inch. Android Browser and WebView default screens are medium pixel density.

The following is the value range of the target-densitydpi attribute

device-dpi – Use the device’s native dpi as the target dp. Default scaling does not occur. high-dpi – use hdpi as the target dpi. Medium pixel density and low pixel density devices scale down accordingly. medium-dpi – Use mdpi as target dpi. Devices with high pixel density scale up accordingly, and devices with pixel density scale down accordingly. This is the default target density. low-dpi - Use mdpi as the target dpi. Medium pixel density and high pixel density devices scale up accordingly. – Specify a specific dpi value as the target dpi. This value must be in the range of 70–400.

Copy code The code is as follows: To prevent Android Browser and WebView from scaling your page based on the pixel density of different screens, you can set the viewport's target-densitydpi to device-dpi. When you do this, the page will not scale. Instead, the page is displayed based on the pixel density of the current screen. In this case, you also need to define the viewport's width to match the device's width so that your page can fit on the screen.

initial-scale Initial scaling. That is, the initial zoom level of the page. This is a floating point value that is a multiplier of the page size. For example, if you set the initial scaling to "1.0", then the web page will be displayed at 1:1 of the target density resolution when displayed. If you set it to "2.0", then the page will be enlarged to 2 times.

maximum-scale Maximum scaling. That is, the maximum degree of scaling allowed. This is also a floating point value indicating the maximum multiplier of the page size compared to the screen size. For example, if you set this value to "2.0", then the page can be enlarged up to 2 times compared to the target size.

user-scalable User-scalable scaling. That is, whether the user can change the zoom level of the page. If set to yes, the user is allowed to change it, otherwise it is no. The default value is yes. If you set it to no, both minimum-scale and maximum-scale will be ignored, since scaling is not possible at all.

All scaling values must be in the range 0.01–10.

Example:

(Set the screen width to the device width and prohibit the user from manually adjusting the zoom)

(Set the screen density to high frequency, medium frequency, and low frequency to automatically scale, and prohibit users from manually adjusting the scaling)

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Viewport use in html5 development_html5 tutorial skills