WAP Project Development Summary

Recently in a WAP site, which encountered a number of details points, is now collated and summed up:

WebKit Core-based browser contains Android Google Chrome, IOS Safari, so to be a compatible WAP site, you need to do an understanding of WebKit.

Http://www.w3school.com.cn/html5/html_5_form_input_types.asp

1. When you focus on the text box, the keyboard will pop up, and the capital key will open automatically, the solution <textarea name= "" autocapitalize= "off"></textarea>

2. When you focus on a text box that enters a phone number, you need to eject the numeric keypad directly. <input type= "Tel" name= "Telphone_num" value= "/>

3. Focus on the text box to enter the email, you need to directly eject the writing email keyboard. <input type= "email " name= "email" value= "/>

4. Add a text hint to the input box. <input type= "text" placeholder= "username/email/verified Phone number" name= "Userinput" class= "Common-input" id= "Userinput" > , here, Iphone4 's Safiri has a problem, that is, when the vertical screen to the horizontal screen, then to the vertical screen, there will be problems, at this time, the need to add an external container input Overflow:hidden

5. In the Division of the page, the developer should first design the page frame (head, tail, layout template (left and right structure, etc.), the individual pages do a separate page style of writing and make comments. Avoid the mutual reference style, when revising a page style, causing the other page style is implicated;

6. In the art of making renderings, if you do not specify the size of the effect map, the front-end developers to scale the page, and sometimes the page elements will be distorted;

7. When designing a WAP page, it is best to use a fixed width (the width is based on the audience of the WAP. For example 320px/480px), high-infinite procedure. Otherwise, the width setting is large, when entering the page edit box, will restore the page size, it is necessary to do a manual scaling operation, very awkward;

8. Set up level two domain name for WAP site; m.xxxx.com

9. Adapt the page to the screen size (media query);

That is, you can select the appropriate style file according to the size of the screen

For example: Top 2 for Android, after 2 pins for iphone

<link  rel= "stylesheet" type= "Text/css" media= "only screens and (max-device-width:640px)"  href= "themes/ Default/css/css_full_320.css "/>
<link  rel=" stylesheet "type=" Text/css "media=" only screen and ( min-width:640px) and (max-device-width:1000px) "href=" Themes/default/css/css_full_480.css "/>
<link rel=" Stylesheet "type=" text/css "media=" screen and (max-device-width:320px) "href=" Themes/default/css/css_full_320.css "/ >
<link rel= "stylesheet" type= "text/css" media= "screen and (min-width:400px) and (max-device-width:1000px)" href= "Themes/default/css/css_full_480.css"/>