Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to develop web mobile phone websites, which has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

The mobile version of the website should at least achieve some basic functions:

1. Applicability of the page:

For Mobile device, there are different resolutions and screen size. If the design of computer also limits the width of web page to 1003px or other pixel value, and the font size is also 12px or 14px, then the effect of different terminals will be very different. So here, it's best to make the width of the web page adaptive to the screen, fortunately, w3c considered this point for us when designing html, just one sentence, you can get it, that is, add

The code is as follows:

For example, we can use em or ex as the unit.

2. Version production issues:

Mobile pages often have different versions for different mobile phones, generally there are simplified version, standard version, 3G version, touch screen version, smart phone version and so on, these in addition to page design is different, page language will also be different. Simplified version of wap 1.0 wml script writing, this versatility before very strong, many domestic mobile phones support this language, but this language is very concise. The standard version can generally use wap 2.0 technology, the corresponding script language is xhtml mp(xhtml mobile profile), this language is a subset of xhtml, this and supports most of the CSS, basically the same as the computer version, but generally can not use JS, this is considering that these phones do not support JS. For the smart phone version, since the current smart phones support JS, this version of the production is much simpler, but also because most smart phones (basically except Symbian phones, including Android, iOS, wp7, etc.) support Html5, therefore, smart mobile version can be produced using html5.

3. Version control issues:

Perhaps this part is relatively difficult to solve, how to intelligently judge the best version of the phone and jump, can be considered from these aspects. On the one hand, you can find a way to get the operating system of the mobile phone, for example, Android, ios, you can jump to html5 version, windows system, no doubt computer version, get the mobile phone system, probably by getting the mobile phone model, the current method is through the browser UA (user agent), get some information about the mobile phone, a little simpler, you can directly judge the manufacturer of the mobile phone through UA. To get more information, you have to have a database, because different mobile phone models will have different UA information, there are many mobile phones in the world, it is still very difficult to make such a database, but someone has done such a database for us, or more convenient, do a good job of identifying the best version of the mobile phone function library, here I recommend using Wurfl. On the other hand, the browser's support for JS and HTML5 can be judged by the script of the page. The code is as follows

The code is as follows:

version control

_window.onload = function(){

//check if JS is supported

try{//check if html5 is supported

document.getElementById("c").getContext("2d");

_document.location = 'HTML5 supported links';

}catch(e){//otherwise jump to js support version

_document.location = 'Support js version';

}

};

regular version

If you just want to develop a version, just decide if it's a mobile client, here's a quote from discuz! x2 code

The code is as follows:

4. Mobile version size issues:

Generally speaking, for the simplified version and the ordinary version of the mobile phone web page, we are doing the more streamlined the better, can save the code is best omitted, after all, mobile phone traffic is still very valuable to users. For example, element naming, general page less words, the shorter the better, css is best written in one line. CSS, some elements are inherited from the parent class style, do not repeat the definition, make good use of default values.

5. Browser cache:

If the update is not fast, it is best to turn on the browser cache.

Thank you for reading this article carefully. I hope that the article "How to Develop a Web Mobile Website" shared by Xiaobian will be helpful to everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.