Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to solve the problem of screen adaptation of html5 on mobile". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to solve the problem of screen adaptation of html5 on mobile".

Html5 used to be the hottest technology, and the mobile end has become more flexible because of the addition of html5 technology. Everyone likes "Write once,run more". But since Zuckerberg admitted his mistake on html5 this year, we should also be soberly aware that html5, as an emerging technology, has many imperfections, such as the efficiency of html5, which is enough for many programmers to complain. Consumers can't stand it, too. But it is undeniable that html5 brings us good web technology, it is the trend of future development, and it is not the end, what we can do is to make more efforts to improve it and write better and more efficient code.

All right, after talking so much nonsense, now let's get to the topic. The adaptation problem of android is the biggest headache for android programmers. Everyone is also the eight Immortals crossing the sea, showing their magical powers, but we can better solve this problem here in html5. Common viewport layouts are:

The specific meaning is:

Width: controls the size of viewport, you can specify a value, if 600, or a special value, such as device-width is the width of the device (in pixels of CSS when scaling to 100%), the default virtual window is 980 pixels wide (currently the standard width of most websites), and then scale by a certain proportion (3:1 or 2:1).

Height: corresponding to width, specify the height.

Target- densitydpi: the pixel density of a screen is determined by the screen resolution and 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 low pixel density screen has fewer pixels per inch, while a high pixel density screen has more pixels per inch. The default screen for Android Browser and WebView is medium pixel density.

The following is the range of values for the target-densitydpi property

Device-dpi-use the original dpi of the device as the target dp. Default scaling does not occur.

High-dpi-use hdpi as the target dpi. The devices with medium pixel density and low pixel density are reduced accordingly.

Medium-dpi-use mdpi as the target dpi. The high pixel density device is enlarged accordingly, and the pixel density device is reduced accordingly. This is the default target density.

Low-dpi-use mdpi as the target dpi. The devices with medium pixel density and high pixel density are enlarged accordingly.

-specify a specific dpi value as target dpi. The range of this value must be between 70ml 400.

To prevent Android Browser and WebView from zooming your page according to the pixel density of different screens, you can set viewport's target-densitydpi to device-dpi. When you do this, the page will not zoom. Instead, the page is displayed according to 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 match the screen.

Initial-scale: the initial scale, that is, the scale when the page is first load.

Maximum-scale: the maximum scale to which users are allowed to zoom, ranging from 0 to 10.0.

Minimum-scale: the minimum scale to which users are allowed to zoom, ranging from 0 to 10.0.

User-scalable: whether users can manually zoom, values can be: ① yes, true allow users to zoom; ② no, false do not allow users to zoom, if you set it to no, then minimum-scale and maximum-scale will be ignored, because it is impossible to zoom.

All scaling values must be within the range of 0.01mur10.

After setting these attributes, put them into the meta attribute of html5 to adapt to the mobile phone screen, for example:

The code is as follows:

[mw_shl_code=xhtml,true] [/ mw_shl_code]

Here are two examples of practical use:

(set the screen width to the device width, which prevents the user from manually adjusting the zoom)

The code is as follows:

(set the screen density to high frequency, intermediate frequency, low frequency automatic zoom, prohibit users from manually adjusting zoom)

The code is as follows:

Thank you for your reading. the above is the content of "how to solve the problem of screen adaptation of html5 on mobile". After the study of this article, I believe you have a deeper understanding of how to solve the problem of screen adaptation of html5 on mobile, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.