Mobile phone screen adaptation technology pre-developed

Preface

With the constant changes in mobile phone screens, some users' mobile phone screens are still in the size of 240*320. Of course, they are also stored in some irregular screen resolution. For many UIS, multiple sets of images can be drawn from different mobile phone screens to ensure that the mobile client matches on different screens. Plan the implementation of the mobile client on different screens, and develop a filling Area algorithm that can calculate the position of the specific control, this is an interface adaptation algorithm for matching different mobile phone screens in the early stage.

Terms and abbreviations

VML	VML is the abbreviation of the Vector Markup Language (Vector Markup Language. VML is a markup language used to vectorize graphic data. VML is equivalent to the paint brush in IE, which can achieve the graphics you want. Combined with scripts, the graphics can produce dynamic effects.
Viewport	Visible area, excluding all toolbar, status bar, scroll bar, and so on, used to view the area of the web page, which is truly effective.
Safari	Browser Safari is the browser in Mac OS X, the latest operating system of Apple Computer. KDE's khtml is used as the core of browser computing.

Achievements of technical pre-Research

Through this pre-study, I learned how to adapt to different types of mobile phone screens and how to choose a better method for R & D.

This pre-study mainly achieved the following results:

1. Get the size of the cell phone screen through different mobile phones;

2. Set "viewport" to automatically match the mobile phone screen.

Research Report of technology

Use WML to get the phone screen size:

The difference between WAP development and general JSP development is not very big, that is, adding to the traditional HTML:

<! Doctype HTML public "-// wapforum // dtd xhtml mobile 1.0 //" http://www.wapforum.org/DTD/xhtml-mobile10.dtd ">

In other aspects, the syntax is the same as that in JSP.

 

Hypothetical: Because the JSP page has a property width, you can set the size of the JSP page. After obtaining the mobile phone width for browsing the website, assign the width value to the back of the width to control the page display size. In this way, as long as we control the page, the result displayed on the phone is the entire page.

 

Try:

Request. getheader ("X-Up-devcap-screenpixels"); we can get the result:

Http_x_up_devcap_screenpixels: 120,96

Height: 120, width: 96

 

Use the following code:

Display display = (windowmanager) getsystemservice (window_service). getdefaultdisplay ();

IntWidth = display. getwidth ();

IntHeight = display. getheight ();

IntOrientation = display. getorientation ();

 

When orientation is 1, the mobile phone is a portrait screen, and the width value in the JSP page is 96px. If orientation is 2, the mobile phone screen is a landscape screen, the value of width in the JSP page is 120px. Because the height of the WAP page can be controlled by sliding the mobile phone screen or turning pages, we only discuss the width of the mobile phone here.

 

Implementation: This method was used to conduct an experiment without obtaining the height and width of the mobile phone trial. We found that the mobile phone number supported by this method is limited, especially for GSM mobile phones. Not supported by ZTE and Moto. Many websites provide unsupported mobile phone models and the height and width of these mobile phones, as shown below:

LG Mobile Phone:

LGE-CU6260: screen_width_chars = 8, screen_height_chars = 9, color_depth = 65536, picture_width = 120, picture_height = 160, picture_format = PNG/BMP, ringtone_format = mid

Motorola mobile phone:

MOT-V688: screen_width_chars = 8, screen_height_chars = 8, color_depth = 65536, picture_width = 128, picture_height = 128, picture_format = PNG, ringtone_format = mid

And so on. There are so many mobile phone models that are not currently supported. as mobile phones continue to grow, I believe there will be more and more mobile phone models that do not follow this rule. If this solution is used for mobile phone screen adaptation, then we will constantly update the data of mobile phone models that do not support this method. In this case, our workload is constantly increased, and it is very likely that this solution is not feasible.

Research Report on technology B

Configure the WAP Webpage Through "viewport:

By testing the current a3g website, we found that the optimal resolution of the webpage is approximately 240*400. When the screen of the mobile phone is larger, some mobile phones can still display the webpage normally, however, the page displayed on some mobile phones is messy, which may be caused by different mobile browsers.

 

The viewport attribute is used to set the mobile phone screen auto-adaptation. The parameters are as follows:

<Meta name = "viewport" content = "width = device-width; initial-scale = 1.4; minimum-scale = 1.0; maximum-scale = 2.0"/>

All attributes of viewport:

Width-width of viewport

Height-the height of viewport

Initial-scale-initial scaling ratio

Minimum-scale-minimum scale allowed by users

Maximum-scale-maximum scale allowed by users

User-scalable-whether the user can manually Scale

For example:

Width = 960 or device-Width

Height = 1000 or device-height

Initial-scale = 0.5

Maximum-scale = 2

Minimum-scale = 1

User-scalable = 1 or 0 (yes or no)

 

Next we will talk about device-width, which literally means that the viewport width is equal to the device width, viewport, that is, the visible area. For desktop browsers, we all know what the viewport is, that is, the area used to view webpages after all the toolbar, Status Bar, and scroll bar are gone. This is a truly effective area. (No matter how big your screen is, if you have enough toolbar, your viewport will eventually disappear .) In a desktop browser, the viewport size is directly related to the browser window size. When the window size is large, the viewport size naturally increases. As the viewport size changes, the page layout may also change. For example, width:
The page width of 100% is always the same as the viewport width.

 

However, iPhone safari does not understand the viewport in this way. It presents the Page Based on the viewport, And the viewport remains unchanged after the user scales the page, only that the page content is scaled proportionally. For example, if no viewport is set, the default viewport is 980 in width (in pixels ), the layout displayed on the page is the same as that displayed when the desktop's short viewport width is 980. However, because the iPhone screen width is 320, It is scaled down proportionally.

 

However, different browsers of the iPhone provide a fixed value: 320px, which is derived from Apple because the early iPhone resolution was 320px × 480px, A large number of websites tailored for the iPhone have set viewport: width = device-width, and are designed and manufactured according to the width 320px, therefore, when other browsers support viewport, device-width is also defined as 320px for compatibility.

 

If no viewpoint is set, the website will be shown as a thumbnail In the viewpoint format.

 

Currently, the initial scaling ratio initial-scale is set to 1.4 in the designed webpage, so that the page displayed on the mobile phone with a relatively narrow screen will be chaotic. After 1.4 is changed to 1.0, this problem will not occur. Android and iPhone mobile phones support multi-point scaling. If we scale our webpage too small, it will lead to confusion on the phone. When the page size exceeds a certain factor, the displayed font and image are distorted.