Mobile website Reconstruction experience Sharing (S60V3)

Objective

As students of Web refactoring should know, we generally need to test page compatibility on an operating system (WINDOWS-XP) and over 4 browsers (Ie678,firefox,chrome,opera, etc.).

On the other hand, the page compatibility test on the phone is rather painful! Mobile phone optical operating system has s60v3,s60v5,mtk,android,
Windows-mobile and so on, each operating system in addition to its own browser, there are at least 3 more than the user can download the installation of the browser, to achieve better compatibility must be in a variety of platforms on the mobile phone to install a different browser test, and summed up the differences and commonalities.

Through the mobile Tencent Network and QQ space WAP2.0 version of the page after a benefit, this time to share S60v3 platform production experience

About S60v3 and browsers

The third edition of the Symbian operating system Series 60 operating system is the most widely used smartphone operating system in the S60 series.

S60v3 models are: Nokia: N73, N82, N85, N95, E61, E71, 6120c and so on, and the new machine species is constantly launched ...

S60v3 platform In addition to its own browser, the most commonly used browsers are: UC Browser, go browser, Opera Mobile/mini

Before comparing the different browsers to the CSS support, first look at the mobile Tencent network in the different browsers:

Box model

try not to specify a height for the elements of the page UCWeb and go browsers do not support width, automatic 100% display page UCWeb does not support the left and right border, support up and down border

The

page uses 100% width, the compatibility is best! UCWeb and go browsers do not support width, 100% display page

S60 Platform is the most common width of 240px and 320px, so if you want to specify a width for the page, only one option: 240pxUCweb and go browsers do not support width, 100% display page

colors, backgrounds, and fonts

Must display the pattern, do not use the background picture, directly uses <img> the label to avoid simultaneously many kinds of text size, the partial browser's font size is set by the user not to be too tangled in bold and italic, depending on the characteristic of the handset with the font

adds background color and text color combinations for each element that has a background image, and also produces a good visual effect UCWeb and go browsers do not support width, automatic 100%-width Display page

If your page uses a width of 100%, it is best to use a picture that can be tiled or duplicated

Text Processing

when designing, try to avoid the alignment of the left alignment part of the browser link is not an underscore, depending on the user's set word spacing and text indentation, avoid using the

reasonable use of row height to make the page more readable, do not support the specified row height browser also has the default row height

UCWeb supports text center, but does not support right alignment

Selectors and pseudo classes

most browsers do not support the definition of the color of the Access connection (a:visited), when designing, note that the background color of the link does not match the color of the browser's default access to the connection color you can specify whether the connection is underlined depends on the settings of the browser

rational use of global selectors, enhance efficiency class and ID selector are safe to use

can achieve different effects for different browsers by the difference that the selector supports

Other

DTDs and labels used by major portal WAP2.0 editions

try to avoid using table

recommended use of document types: xhtm Mobile Profile 1.0 or 1.1 recommended tags include: div,p,span,ul,li,br,img

Experience Summary

semantic label, and picture merging technology, at this stage is not suitable for use on the mobile phone site (embarrassed) a set of CSS can adapt to the full platform of browsers, this is just a dream we have just started! Look forward to your common research and sharing!!

(This article originates from Tencent WSD Blog, please indicate the source when reprint)

Source: http://wsd.tencent.com/2010/07/mobile-web-rebuild-s60v3.html