Mobile Browser Page Knowledge Collection

　　WAP Mobile Web CSS (WAP CSS)
Most phones now support XHTML browsers, which means we only need to set the stylesheets type to "handheld"

1 * {23position:static!important; 4 5 Float:none!important; 6 }

Because the current mobile phone screen restrictions, there is not much space to drift, it is recommended to use a static layout and as little as possible with float (ucweb6.0 currently does not support float)
In order to mobile phone traffic, promote as little as possible with the background map Background:none!important;
In addition, the background color of white text on some phones is not supported, so less use this effect (ucweb6.0 is not currently supported)
Solution for Pocket PC 2003 in Pocket IE auto-shrink
Pocket IE to the Pocket PC 2003, the speed of reading the page has improved a lot, and finally to the practical stage. The new pocket IE will automatically zoom out for graphics that exceed the screen width, avoiding the appearance of horizontal reels.
The auto-thumbnail function is good, but does not provide the ability to turn off, resulting in a Flash movie (240x320) that was previously full-screen on Pocket PC 2002, and automatically shrinks after the pocket PC2003. The problem is now solved, just add 〈meta name= "mobileoptimized" content= "240" to the HTML page.
　　Common Meta information for XHTML MP
You can use the tag to specify some common meta information for your XHTML MP file. Labels should be included between the labels. The WAP browser ignores meta-information that it does not understand. You can specify any kind of meta information in an XHTML MP file without affecting the appearance of the page.
For example, you might want to include the author's name in your XHTML MP file instead of displaying it on the screen.

〈meta name= "Author" content= "Linlin"/〉

　　The cache control of XHTML MP
One of the uses of tags is to control the expiration time of one XHTML MP file in the cache. The cache is a memory space in a wireless device that temporarily stores the XHTML MP files that are downloaded from the server. If the Wap browser discovers that one of the XHTML MP files requested is in the cache and has not expired, the Wap browser displays the files in the cache to minimize the load delay. If your XHTML MP page has time-sensitive content, such as financial data, you might want to set the expiration time to a smaller value or even 0, so that the user can later see the outdated XHTML MP page. The following XHTML MP example shows how to set the expiration date of an XHTML MP page to 0 with a label.

〈meta http-equiv= "Cache-control" content= "No-cache"/〉 or 〈meta http-equiv= "Cache-control" content= "max-age=0"/〉

Set the expiration date of an XHTML MP file to 300 seconds

〈meta http-equiv= "Cache-control" content= "max-age=300"/〉

　　Intermittent refresh in XHTML MP
In the XHTML MP, HTTP refreshes can be used to notify the WAP browser to refresh the current page intermittently. This is a very useful feature for mobile internet browsing applications that provide real-time information. In the following XHTML MP code, the page is automatically refreshed once every 15 seconds. It is important to note that this XHTML MP example is required. If the above code is not included, the WAP browser will simply display a copy of the document in the cache without having to connect to the server each time it is refreshed.

〈meta http-equiv= "Cache-control" content= "No-cache"/〉〈meta http-equiv= "Refresh" content= "15"/〉

HTTP refresh can be used to notify a WAP browser to go to another URL after a certain amount of time. You can use this feature to redirect the user to another XHTML MP page or create a slide, as in the following example 15 seconds to redirect the user to "hello_world_example1.xhtml".

〈meta http-equiv= "Refresh" content= "15; Url=hello_world_example1.xhtml "/〉

Note, however, that some WAP browsers do not support HTTP refresh.
Exceptions, several useful meta-information

〈meta id= "viewport" name= "viewport" content= "width=240; User-scalable=0, "/〉〈meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/〉〈meta name=" mobileoptimized "content=" 240 "/〉

　　META tags for viewport
This meta tag is added to the head of the Web Phone wap2.0 Web page, and the page will be displayed in its original size in the iphone's browser and does not allow zooming.

〈meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ")

which
The height of the width-viewport width height-viewport
Initial-scale-Initial zoom ratio
Minimum-scale-Minimum scale to allow the user to zoom
Maximum-scale-Maximum scale to which the user is allowed to zoom
User-scalable-whether the user can manually scale
This label is mainly used to control the search engine crawl site frequency, tell the search engine how long time to crawl the site. If I set, then the search engine is 7 days. The use of this label site, usually because the website data volume is very large, by the search engine too often crawl, will occupy too large resources, affecting the site's access. Therefore, hope that the search engine does not come every day, crawl once, then wait 7 days to come again. This tag is not required for a general website.
　　Typical structure of the language XHTML MP document for wap2.0 mobile Web pages

1 〈?xml version= "1.0"?2 ! DOCTYPE HTML PUBLIC "-//wapforum//dtd XHTML Mobile 1.0//en" "Http://www.wapforum.org/DTD/xhtml-mobile10.dtd"3 〈html xmlns= "http://www.w3.org/1999/xhtml"4 〈head〉5 〈title> First Mobile page example 〈/title〉6 〈/head〉7 8 〈body〉9 〈p〉 Hello. Welcome to the first mobile page example. 〈/p〉Ten 〈/body〉 One〈/html〉

The XHTML MP begins with the preamble (Prolog), which contains the XML declaration and the DOCTYPE Declaration.
The preamble component is not an element of the XHTML MP, so it should not be closed, that is, you should not add the end tag to them or end them with/〉.
The remainder of the document, in addition to the 〈html〉 tag in HTML, should not have an xmlns attribute other than the normal HTML document.
The XHTML MP must contain 〈html〉,〈head〉,〈title〉, and 〈body〉 elements.
　　XML declaration and character encoding format:
All XHTML MP are XML documents. Therefore, the beginning of the document always has an XML declaration. The XML declaration specifies the XML version of the document. The character encoding of the document can also be specified here, like this:

〈?xml version= "1.0" encoding= "UTF-8"?

The previous line stated that the XHTML MP document has an XML version of 1.0 and the character encoding format is UTF-8. If the encoding format of the XHTML MP document is UTF-8 or UTF-16, the encoding attribute can be omitted.
In XHTML MP, the XML declaration is not a required component. However, if the XML declaration is omitted, it will cause some WAP browser problems. For example, some Sony Ericsson WAP browsers, when received with a MIME type of text/html, use XML declarations to differentiate between XHTML MP and ihtml (a patented markup language defined by the NTT DoCoMo) document: If the document contains an XML declaration, it is an XHTML MP document, otherwise it is a ihtml document.
　　DOCTYPE statement:
All XHTML MP documents must have a DOCTYPE declaration. The declaration should be placed between the XML declaration and the element. The following is the DOCTYPE declaration for XHTML MP. You can copy and paste it directly into your XHTML MP.

〈! DOCTYPE HTML PUBLIC "-//wapforum//dtd XHTML Mobile 1.0//en" "Http://www.wapforum.org/DTD/xhtml-mobile10.dtd"

DOCTYPE Specifies the name of the DTD (document type definition) and the URL to link to the DTD. The DTD contains syntax information about the markup language. It defines the rules for what elements and attributes can be used and used in markup. The validation tool can be used to check whether your XHTML MP document complies with the XHTML MP language rules by comparing your XHTML MP document with the DTD specified in the DOCTYPE declaration. Some Ides have integrated similar auditing tools.
〈body〉 elements:
The 〈body〉 element is used for the actual content of the container. An XHTML MP file can contain only one 〈body〉 element, and the text cannot be included directly in the 〈body〉〈/body〉 label pair. For example, the following markup code is incorrect in the XHTML MP:
〈body〉 Hello. 〈/body〉
To correct the above XHTML MP tag code, the text in the body of the document must be contained in other elements, such as a paragraph (〈p〉〈/p〉), a list (〈ul〉〈li〉〈/li〉〈/ul〉 or 〈ol〉〈li〉〈/li〉〈/ol〉), a caption (〈h1〉〈/h1〉, 〈h2〉〈/h2〉 ...), and so on, between. The following markup code is correct in the XHTML MP:
Hello, 〈body〉〈p〉. 〈/p〉〈/body〉
　　 What specifications do I need to follow for mobile page coding?
Follow the XHTML Mobile Profile specification, referred to as the XHTML MP, which is commonly said as the WAP2.0 specification. XHTMLMP is designed for clients that do not support all features of XHTML and have limited resources. It is based on XHTML Basic and joins some elements and attributes from XHTML 1.0. These include some other elements and support for internal style sheets. As with XHTML Basic, XHTML MP is a strict subset of XHTML 1.0.
　　 What is the recommended extension for Web documents?
The recommended name is XHTML, according to WAP2.0 specification standard written html/htm, etc. is also possible. But a few phones are not good for HTML support.
Why do most websites today have a maximum of 14 Chinese characters in a row?
Due to the particularity of the handheld device, the actual text size in the page is not necessarily the size of the text we set in the CSS, especially in third-party browsers. For example Nokia5310, its built-in browser page text size and CSS settings match, but the third-party browser Operamini and UCWeb page text size is larger than the CSS settings. After testing, the text is about 16px. If the screen resolution width is 240px, to remove the margin, then its line is displayed in 14 characters, is more insurance (avoid text wrapping) practice.
　　 use WCSS or CSS?
WCSS (WAP cascading style Sheet or wap CSS) is a mobile version of the CSS style sheet. It is a subset of CSS2, removing some attributes that are not suitable for mobile internet features, and adding some extensions with WAP features (such as-wap-input-format/-wap-input-required/display:-wap-marquee, etc.). It is important to note that these special attribute extensions are not very practical, so it is not recommended to use WCSS-specific properties in actual project development.
　　 avoid null values property
If the value of the property is empty, there is no problem in the Web page, but it will be an error on most mobile pages.
　　 Page Size Limits
The recommended low version of the page does not exceed 15k, the higher version of the page does not exceed 60k.

Mobile Browser Page Knowledge Collection