[WebView 2]: using Web Apps to support screens with different resolutions, webviewapps

[WebView 2]: using Web Apps to support screens with different resolutions, webviewapps

We learned in the previous article (1. [one of WebView learning]: Introduction to Web Apps). Let's continue learning today.

(Blog address: http://blog.csdn.net/developer_jiangqq), reprint please note.

Author: hmjiangqq

Email: jiangqqlmj@163.com

 

Because Android devices have a lot of resolutions, different screen and pixel density, you should consider that the webpage can always display a proper size during the design of the web page.

When you develop a Web page for Android devices, we need to consider the following two factors:

1. view form (The ViewPort)

The Viewport is a Web page with a rectangular shape that can be scaled. You can set multiple ViewPort attributes, such as the size and initial scaling ratio. The most important thing is the view port width, which defines the horizontal pixel size of the entire web page.

2: Screen Density (The Screen Density)

On Android devices, the WebView control, like most Web browsers, can convert CSS pixel values to density-based independent pixel values. Therefore, your Web page is displayed in the same size on a medium-density screen (for example, 160 dpi. If images are the most important in your Web design, you should pay more attention to the conversion of different resolution density. The PX width will be enlarged on the DPI screen.

 

(1): Specify the window Properties (Specifying Viewport Properties)

The form is a Web page area. The visual form can still match the screen size when we zoom in and out. For example, when the physical width of our device is 1.0 PX (pixel), The viewport width is PX (pixel), and the normal scaling ratio is when the Viewport is) the web page based on the 800px device is fully displayed on the screen. In Android, the vast majority of Web browsers (such as Chrome) set a large size view by default (called "wide view mode"-usually 980px ). Many browsers also try to narrow down to display the full size by default (this is called the summary mode)

[Note]: When WebView is used to display a page, the wide view mode is disabled by default (the page will be fully enlarged and will not adapt to the screen). Of course, you can call setUseWideViewPort () to enable the wide view mode.

 

You can use <metaname = "viewport"…> Tags define view attributes for your Web page, such as width and initial scaling ratio.

The following are all the attributes and configurable values supported by Viewport.

<span style="font-size:18px;"><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"]          " /></span>

For example, in the <meta> label below, the viewport width is defined to fully adapt to the screen width, and the user cannot zoom in or out.

<span style="font-size:18px;">
When optimizing webpages for mobile devices, we should set width to "device-width" to adapt to all screens as much as possible. Then, use the CSS style file to adjust the layout for different screen resolutions.
[Note]: When you confirm that your Web page is displayed on a small-resolution screen, you should call setUseWideViewPort (false) to disable the wide view mode.
 
(2) Use CSS styles (Targeting Device Density with CSS) for different screens)
Both Android and WebView support CSS style files, so that you can create CSS style files with "-webkit-device-pixel-ratio" for special screen density. This attribute can be set to "0.75", "1", or "1.5", which respectively indicates low density, medium density, and high density screens.
For example, you can create a separate style file for each density:
<span style="font-size:18px;"><link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /><link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /></span>
Alternatively, you can create different styles in a style file.
<span style="font-size:18px;">#header {    background:url(medium-density-image.png);}@media screen and (-webkit-device-pixel-ratio: 1.5) {    /* CSS for high-density screens */    #header {        background:url(high-density-image.png);    }}@media screen and (-webkit-device-pixel-ratio: 0.75) {    /* CSS for low-density screens */    #header {        background:url(low-density-image.png);    }}</span>


For more information about processing different screen resolutions and special resource Images, see: High DPI Images forVariable Pixel Densities.
 
(3): use JavaScript for different screen resolutions
The Android browser and WebView both support Dom attributes, so that we can use the DOM attribute window. devicePixelRation to query the density of the current device. The value of this attribute indicates the scaling factor currently set. For example, if the value of window. devicePixelRatio is 1.0, the device is considered a medium-density screen and will not be scaled by default. If the value is 1.5, the device is considered as a high-density screen and will be scaled up 1.5 times. If the value is 0.75, the device is considered as a low-density screen and will scale down by 0.75. Of course, the scaling ratio of the Android browser and WebView is based on the density of devices on the actual web page. By default, the scaling ratio is usually moderate, but you can change the screen density.
For example, you can use Javascript to query the device density.
<span style="font-size:18px;">if (window.devicePixelRatio == 1.5) {  alert("This is a high-density screen");} else if (window.devicePixelRatio == 0.75) {  alert("This is a low-density screen");}</span>











Android ViewFlipper slide to switch to webview. webpages in webview cannot adapt to the screen size.
Slide and execute the next re-drawing page interview

In android, how does one adjust the width of webview to the width of the mobile phone resolution screen?
Set settings. setUseWideViewPort (true); settings. setLoadWithOverviewMode (true); then you can view the original post>