1. Implementation Method
There are basically two ways to develop web programs on Android, one is to use Android SDK to develop APK and webview; the other is to use web standard development and access through a web browser.
2. Features
A. The viewport attribute is supported to allow the application to adapt to screens of different sizes with the correct size.
B. CSS and JavaScript support, providing images of different styles and screen-based pixel density (screen resolution)
Therefore, developing a web application for Android can exclude screen Support considerations. Therefore, you should easily adapt your webpage to all screens equipped with Android systems.
Another major feature of Android is that you can develop an android client application together with webview and APK. You can define the interface between your Android Application and webpage, and allow Javascript in the webpage to call Android Application to provide Android API of Web-based application.
Screens for Web Applications
1. There are two basic factors for developing web pages for Android devices.
A. viewport size and scaled webpage
When the android browser loads a webpage, the default behavior is in "Preview mode", which provides a webpage zoom angle to load the page.
You can define the default viewport size for the webpage or the initial scaling of the viewport, and control the number of users who can zoom in or out the webpage. You can also disable the preview mode in the browser. Therefore, you should not set the page loading mode. You should customize the viewport size or zoom.
B. Screen density of the device
The screen density of Android devices (the number of screens per inch) affects the resolution and size of web pages. (Three-screen density category: low, medium, and high ). In Android browsers and webviews, the screen density of scaled web pages is reduced. If images are an important element in web design, you should pay close attention to the scaling of images in different density, because they can produce blurred effects. To provide optimal visual effects for screens of all density, you should control the scaling and provide resources based on the density of the target screen, which can be used to replace images of CSS or JavaScript on different screens.
Use viewport
Viewport is a area that can be drawn on a webpage. Although the visible area of the viewport matches the screen size, the viewport has its own size to determine the number of pixels of the webpage. That is to say, the number of pixels on the webpage exceeds the defined viewport size, rather than the screen area of the device screen size. For example, although the device screen may have a 480 pixel width, the viewport can have a 800 pixel width, so that the webpage design is 800 pixels wide and completely displayed on the screen.
You can use the viewport attribute on an HTML webpage (it must be set in
For exampleCodeThe width of the viewport attribute specified from an HTML document must completely match the width of the device screen and disable scaling.
<Head>
<Title> example </title>
<Meta name = "viewport" content = "width = device-width, user-scalable = No"/>
</Head>
Content = "width = device-width"
The width of the viewport is equal to the width of the device. The viewport automatically adapts to the width of the screen and scales the image and text.
This is an example with only two viewport attributes. The following syntax shows all supported viewport attributes and the general type of each accepted value
<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]
"/>
Define the viewport size
Define the viewport height and width attribute to specify the viewport size.
As mentioned above, the android browser loads pages in "Preview mode" by default (Unless disabled by the user ). if the viewport width is 800 pixels and your webpage size is 320 pixels in width, Your webpage is smaller than the visible screen. to avoid scaling, you should clearly define the viewport width to match the designed webpage width.
For example, if your webpage is designed to be 320 pixels wide, you may need to specify the width of the View:
<Meta name = "viewport" content = "width = 320"/>
If the width of the viewport is specified, the image will not be scaled. If the viewport is greater than the actual pixel of the screen, the image cannot be fully displayed. You need to drag it to see the complete effect.
In this case, your web page is perfectly suited to the screen width, because the width of the web page is the same as the width of the viewport.
Note: If the width is greater than 10,000 or greater than (or equal to) 320, the result is that the width of the device is equal to one value. The height values greater than 10,000 or less than 200 are also ignored.
Note: by default, if you set the viewport width to match the page width of your website and the screen width of your device, the page is still suitable for high or low density screens. because the android browser loads the webpage with a webview that matches the size of a medium-density screen. the screen density discusses more definitions of the target density of viewport.
Auto resize
Specify the viewport size as an exact pixel alternative. You can set the viewport size to always match the screen size of the device, and define that the height and width of the viewport attribute match the device height and device width. When you are developing a web application with an unknown width (not fixed width), but you want it to perfectly fit every screen, such as the page width matching the screen. For example:
<Meta name = "viewport" content = "width = device-width"/>
Width = device-width, which matches the viewport width, regardless of whether the current screen width is the specified size. It is important to note that when you scale an image to fit the screen size, the current device does not match the target density. The default density is medium density. Therefore, the image displayed by the high-density device is scaled to fit the width of the medium-density screen.
The webpage width and the viewport device width or the initial scaling is 1.0.
Note: if you do not use a scaling webpage to match the device size, you must specify the target device densitydpi. This is about defining the viewport density. otherwise, you can simply use the height and width of the device to define the viewport size, so that your webpage is suitable for the screen of each device, but your image is scaled to adapt to different screen density.
Define the viewport Ratio
The viewport scaling definition applies to the page scaling level. The viewport attribute allows you to specify the scaling range of Your webpage:
Initial-scale initial Scaling
The initial scaling of this page. This value is a floating point value indicating the size of the webpage, relative to the screen size.
For example, if you set the initial scale to "1.0", then the page displays the target density 1 to 1 that meets the resolution. If it is set to "2.0", the page (zoom in) is zoomed twice.
Default initial scaling calculation to adapt to the page size of the viewport. Because the default viewport width is 800 pixels, if the screen resolution of the device is less than 800 pixels wide, the initial size is less than 1.0, by default, to adapt to the 800 pixels wide page on the screen.
Min imum-scale min Scaling
The minimum allowed scaling. This value is a floating point type, indicating that the value is the lowest and the size of the screen is relative to that of your webpage. For example, if you set this "1.0", then the page cannot be reduced because the minimum size and target density are 1 to 1.
Maximum-scale maximum Scaling
Maximum page size. The value is a floating-point number, indicating the maximum webpage size. The screen size is relative. For example, if you set this "2.0", then the target on the page cannot be enlarged by more than 2 times.
User-scalable user scalability
Can the user modify the scaling (zoom in and out) of the webpage ). Set yes to allow scaling and no to disable scaling. It is allowed by default. If you set it to no, the minimum and maximum zooming values will be ignored because zooming cannot be performed.
All zooming values must be within the range of 0.01-10.
For example:
<Meta name = "viewport" content = "initialize-scale = 1.0"/>
The initial scaling of this data is full, relative to the target density of viewport.
Define the target density of viewport
The screen density of a device is defined by the number of dots per inch (DPI) based on the screen resolution. This is supported by Android three screen density: low (ldpi), medium (mdpi), and high (mdpi. A low-density screen can reduce the number of pixels per inch, while a high-density screen has more pixels per inch (compared to a medium-density screen ). The webview of the android browser defaults to the medium density screen.
Because the default target density is moderate, when users have low or high-density screens, Android browsers and webviews of devices scale webpages (effectively zoomed pages) so that they can properly display them, match the screen with medium density. More specifically, the android browser webview scales the high-density screen (because its screen pixels are smaller) and the page on the low-density screen (about 1.5 times) at a value of about 0.75 times, because its screen pixels are larger ).
Because of this default scaling, numbers 1, 2, and 3 are displayed in the same physical size, such as the height of the web page, medium Density devices (by default, the ratio of a high-density device to a webpage is 1.5 times greater than the actual pixel resolution, and the target density is matched ). This can make your image look bad. For example, images on high-density devices are blurred even if they are displayed in the same size as those on medium and high-density devices because they are designed to be 320 pixels wide but displayed in 480 pixels.
You can change it to the target densitydpi viewport attribute of the target screen density used on your website page. It accepts the following values:
Device-DPI
DPI of the device-use the local DPI of the target DPI device. Default scaling never happens.
High-DPI high DPI-use as the target DPI hdpi. Moderate and low-density screens are properly reduced.
DPI in Medium-DPI-use as the target DPI mdpi. High-density screen scaling and low-density screen shrinking. This is the default target density.
Low-DPI low-ldpi is used as the target DPI. Properly expand the medium and high-density screen.
<Value>-specify the DPI value to be used as the target. The value must be in the range.
For example, you can scale the webpage according to different screen density to prevent the DPI of the specified densitydpi device set by default in the android browser and webview. When you do this, the page will not be scaled. On the contrary, the density of the page displayed on the current screen matches. In this case, you should also define the device width that matches the viewport width so that your webpage will naturally fit the screen size. For example:
<Meta name = "viewport" content = "target-densitydpi = device-DPI, width = device-width"/>
For device density and CSS
The CSS media functions supported by the android browser and webview allow you to create a CSS-WebKit device pixel-to-media function with a specific screen density. This feature is applicable to devices, either "0.75", "1", or "1.5", indicating that the style is low density, medium density or high density.
For example, you can create a separate style sheet for each density:
<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"/>
<LINK rel = "stylesheet" Media = "screen and (-WebKit-device-pixel-ratio: 0.75)" href = "ldpi.css"/>
Or specify different styles in a style sheet:
# 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 );
}
}
Note: # the header is the default style. It is applicable to Android versions that support device running. It is designed for low-density devices and does not support pixel-to-media functions of WebKit devices.
Depending on how you define the type style of your viewport attribute, you may need to adjust according to the screen density. A Fully customized style is provided to modify your webpage for each supported density. You should set your viewpor attribute to match the width and density of viewpor devices.
This is:
<Meta name = "viewport" content = "target-densitydpi = device-DPI, width = device-width"/>
In this way, the screen width of the android browser and webview does not match your webpage scaling and viewport width. However, you can apply different styles by adding some custom CSS to use WebKit device pixel-to-media features.
For device density and JavaScript
The android browser and webview support a DOM attribute, allowing you to query the density Dom attribute of the current device, window. devicepixelratio. The value of this attribute specifies the proportional factor used by the current device. For example, if the value is window. devicepixelratio is "1.0", the device is considered to be a medium-density device, which is applied by default. If the value is "1.5 ", this device is considered to be a high-density device and 1.5 times the page scaling by default. If the value is "0.75 ", this device is considered to be a low-density device and 0.75 times the default page scaling. Of course, the android browser and the scaled webview apply are the target density of the webpage, which is defined by the basic definition in the joints. The default target is medium density, but you can change the target to influence how your webpage scales to different screen density.
For example, here is how you can use JavaScript to query the device density:
If (window. devicepixelratio == 1.5 ){
Alert ("this is a high-density screen ");
} Else if (Windows. devicepixelratio = 0.75 ){
Alert ("this is a low-density screen ");
}
Best practices for Web Applications
Developing Web applications on web pages and mobile devices poses different challenges, developing web pages as typical desktop browsers. To help you get started, we recommend that you provide a list of the most effective web applications with Android and other mobile devices.
1. redirect a mobile device to a mobile version of a dedicated website
There are several methods to redirect requests to the mobile version of your website and use server-side redirection. In most cases, this is a user proxy string "sniffing" provided by a Web browser ". To determine whether it is the mobile version of your website, you should simply look at it as a "mobile" User proxy string, matching a variety of mobile devices. If necessary, you can also identify user proxy strings (such as "android 2.1") in a specific operating system ").
Note: for large-screen Android power supply devices, full-size websites (such as tablets) should be delivered, excluding the "mobile" User proxy string, while the rest of the user proxy string is mostly the same. Because of this, it is very important that you provide the "mobile"-based user proxy string to check whether your website's mobile version exists.
2. This is applicable to mobile devices and uses a valid labeled doctype.
The most common Markup Language XHTML is used for mobile websites. This standard makes sure that your website is most suitable for specific tags on mobile devices. For example, it does not allow HTML frameworks or nested tables and does not perform well on mobile devices. Along with doctype, ensure that the reporting file (such as the UTF-8) is properly encoded.
For example:
<? XML version = "1.0" encoding = "UTF-8"?>
<! Doctype HTML public "-// W3C // dtd xhtml basic 1.1 // en"
Http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd>
3. Use the metadata of viewport to adjust your webpage as appropriate
In your file For example:
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = No">
For more information about how to use the metadata of the Power Supply Device of Android, see the screen for Web applications.
4. Avoid multiple file requests
Because mobile devices usually have a connection speed far slower than a desktop computer, you should load your webpage as quickly as possible. One way to speed up is to avoid loading style and script files, such as additional files
5. Use a vertical linear Layout
Avoid scrolling the web page to the left and right while browsing the page. Scroll up or down to make your webpage easier.
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
