Things to note when designing web pages for small-screen mobile devices

• Mobile phone screen resolutions are a mess, there are all kinds of resolutions!
• Our mobile Internet charges are so expensive!
• UC Browser has a huge market share!

About UC Browser:

Yes, I have to mention it. Who says it has a high market share?
As for UC Browser, it is obviously very suitable for my country's national conditions, and it helps users save mobile Internet traffic to the maximum extent. (UC Browser’s slogan seems to be saving data traffic).
Based on mobile applications and text readability, UC Browser also features large fonts and large line spacing.
Compared with other mobile browsers, UC Browser has a special and customized way of handling HTML tags and CSS attributes.
As it stands, these special treatments will continue to be in place for a long time until the cost of mobile Internet access is significantly reduced, allowing consumers to use mobile Internet more boldly.

In actual development, we found that UC Browser has some "special care" for CSS:

• The font-family attribute is not supported, which means that you can only see one font in UC Browser;
• The font-size attribute is not supported, which means that you can only see fonts of the same size in UC Browser;
• The width, height, padding, margin, and line-height attributes are not supported. In other words, in UC Browser, you can only use HTML tags such as p and br to wrap lines to achieve upper and lower character spacing.
• It does not support fixed pixel width and 100% display of the page, that is, you will always see a "full screen" in UC Browser;
• Floating and cascading layouts are not supported, and the float and position attributes are invalid. That is to say, you can only see "left alignment" in UC Browser.
• It supports background-color but not background-image, which means it does not support CSS background image display. You can only see the background color in UC Browser.

However, I still believe that when building web sites for small-screen mobile devices, the interface can be developed based on the browser of the WebKit engine as the standard.
In other words, we design web pages to support UC Browser, rather than designing web pages based on UC Browser standards .
Another benefit of doing this is that it can ensure relatively consistent styles on most mobile browsers.
As for browsers like UC that don’t even support standard CSS properties such as float, don’t worry too much about it!
However, in order to ensure that the elements in the interface still have a good reading order in UC Browser, it is strongly recommended that HTML coders pay attention to the order of each HTML tag.
Because only in browsers that support float and position attributes can the containers on the page float or stack arbitrarily. Otherwise, the browser will display the HTML tags in the order they appear.

Some other related supplements on web design for small-screen mobile devices:

• Header
  Taking into account some characteristics of small-screen mobile devices, when designing web pages, some website headers (including LOGO, global navigation, etc.) can be removed.
  For example, flick's large image page removes the website header.

Here I created a fashionable design principle: "For the interface design of small-screen mobile devices, the interface of certain specified tasks should give priority to letting users focus on the current task rather than the application itself. " This principle is feasible and also applies to designing mobile device applications~
For example, if you are designing a mailbox for small-screen mobile devices, you can remove the website header on the letter writing and email reading pages.