What is the best design practice for setting page width for mobile web pages?

Different browsers on different phones have different screen resolutions.

Is there a best practice in the community to set the width of the standard size so that it works on most modern phones and browsers?

+7
css width mobile screen-resolution mobile-website
source share
4 answers

IMHO the best practice is to do without too many assumptions about the width and resolution of the client device.

Basically, these devices have browsers designed to display / stream / reduce web pages. If at all possible, let the browser do the work.

+3
source share

There is no easy way to ensure accurate pixel accuracy in mobile browsers (in fact, there is no easy way to do this with any browser). There are, however, some methods to help with such work. For example, mobile Safari for iPhone supports the viewport meta tag, which allows you to specify attributes such as width. Here are a few usage examples:

<meta name="viewport" content="width = 750px"/>

<meta name="viewport" content="initial-scale=2.5, user-scalable=no"/>

Apple has some information here and you will find much more information on the Internet.

+7
source share

G'day

I know that you doubt in deciding to choose the optimal screen size to work on all phones, but this approach will soon wear out with users.

The large website I am linked to takes the UserAgent string and normalizes it to a common denominator, for example. more than 300 different UA lines used in the UK for a particular Sony Ericsson phone, so they are all converted to a single line and then look at the table to determine the screen real estate.

Encoders also have access to the current connection speed, which is displayed by the geolocation application based on the type of connection, type of routing, etc. at the time of the request. . You do not want to send rich, high-level media to someone with a slow connection.

Then used

  • decide whether to serve rich content and then
  • Choose the best format for your content.

NTN

amuses

+1
source share

You can always use "ems" instead of the pixels that they need to scale properly.

This is still a sober question, as many mobile browsers mostly interpret what you have, depending on how the developers wanted to interpret it.

0
source share

All Articles