Precautions for Mobile Page Design

Source: Internet
Author: User
Document directory
  • Issues you need to pay attention to during development

XHTMLPart

Not supported by most mobile phones:

  • "Disable" attribute of form elements

Some mobile phones do not support:

  • "Button" label
  • "Input [type = file]" tag
  • "Iframe" label.

Although only some mobile phones do not support these labels, these labels often have very important functions on the page, so they are high-risk labels and should be used with caution.

Not supported by a few mobile phones:

  • "Select" label: If the label is assigned a complex CSS attribute, it may cause abnormal display, such as "vertical-align: Middle ".

CSSPart

Most mobile phones do not support:

  • "Font-Family" attribute: because only the Chinese font "" is installed on the mobile phone;
  • "Font-family: bold;": Invalid for Chinese characters, but generally valid for English characters;
  • "Font-style: italic;": Same as above;
  • "Font-size" attribute: for example, the Chinese character of 12px is as big as that of 14px. When the character size is 18px, you may see some differences;
  • "White-space/word-wrap" attribute: force line breaks cannot be set. Therefore, when your webpage has many Chinese characters, pay special attention not to open the page with too many English characters;
  • "Background-position" attribute: other attributes of the background image are supported;
  • "Position" attribute;
  • "Overflow" attribute;
  • "Display" attribute;
  • "Min-height" and "Min-weidth" attributes;

Some mobile phones do not support:

  • "Height" attribute: the support for "height" is not very good. It is strange that in our tests, only a few mobile phones do not support the "width" attribute;
  • "Pading" attribute
  • "Margin" attribute: a higher percentage of mobile phones do not support negative values of "margin.

Not supported by a few mobile phones:

  • A few mobile phones do not support CSS at all;

JavascriptPart

This part of the test is not so crazy, or it is simply not supported. If it is supported, it is not bad for basic Dom operations, events, and other support. However, we have not tested complex scripts.

Among the mobile phones we tested, the proportion of mobile phones that support (including not fully supported) JavaScript is about half. Of course, the most important thing for us is not this proportion, it is about how to downgrade JavaScript elegantly.

Others

  • Some mobile phones do not support png8 and png24, so use jpg and GIF images as much as possible.
  • In addition, for the smooth gradient and other fine image details, the color support of some mobile phones does not meet the requirements, so use the bar design with smooth gradient with caution.
  • Some mobile phones do not zoom in or display the scroll bar of a large image.
  • When a few mobile phones open a test page that exceeds 20 KB, the system displays insufficient memory.
Issues you need to pay attention to during development
  • What specifications should mobile phone webpage code follow?
    Compliance with the XHTML mobile profile specification (xhtml mp for short), also known as the WAP2.0 specification. XHTMLMP is designed for clients that do not support all the features of XHTML and have limited resources. It is based on XHTML basic and adds some elements and attributes from XHTML 1.0. These include some other elements and support for internal style sheets. Like XHTML basic, xhtml mp is a strict subset of XHTML 1.0.
  • Is the extension recommended for webpage documents?
    We recommend that you name it XHTML. You can write HTML/htm Based on WAP2.0 standards. However, a few mobile phones do not support HTML.
  • Why is the maximum number of words in a row of most websites currently 14?Chinese characters?
    Because of the special nature of the handheld device, the actual text size on the page may not be the text size we set in CSS, especially in a third-party browser. For example, in nokia5310, the text size on the built-in browser page is consistent with the CSS setting, but the size of the Third-Party Browser operamini and ucweb pages is greater than the CSS setting. After testing, the text is about 16 PX. If the screen resolution width is PX and the margin is not removed, it is safer to avoid text wrapping if one line is displayed within 14 characters.
  • Use WCSSOr CSS?
    WCSS (WAP Cascading Style Sheet or wap css) is a mobile CSS style sheet. It is a subset of css2 and removes some attributes that are not suitable for mobile Internet features, and add some extensions with WAP features (such as-wap-input-format/-wap-input-required/display:-wap-Marquee ). It should be noted that these special property extensions are not very practical, so in actual project development, we do not recommend the use of WCSS-specific properties.
  • Avoid null values
    If the property value is blank, there is no problem on the web page, but errors will be reported on most mobile Web pages.
  • Webpage size limit
    It is recommended that the pages of earlier versions do not exceed 15 kb and those of later versions do not exceed 60 kb.
  • Is it reliable to use a mobile phone simulator and an online simulator of a third-party mobile browser to test the page?
    If conditions are met, we certainly recommend that you test the mobile phone entity because the mobile phone devices of the target customer base are constantly changing, generally, these phone simulators cannot fully simulate the display of pages on mobile phones, such as the color of the phone, page size restrictions, and so on. It is difficult to test on the simulator. Of course, some online Simulators of third-party mobile browsers can still be tested. Third-party browsers are relatively less affected by mobile phone devices.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.