设置移动网页的页面宽度的设计最佳做法是什么?

时间:2021-11-08 15:54:42

Different browsers on different phones have different screen resolution.

不同手机上的不同浏览器有不同的屏幕分辨率

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

在社区中是否有最佳实践将宽度设置为标准尺寸,以便它适用于大多数现代手机和浏览器?

4 个解决方案

#1


3  

IMHO the best practise is to get along without too many assumptions about width and resolution of the clients device.

恕我直言最佳做法是在没有太多关于客户端设备的宽度和分辨率的假设的情况下相处。

Mostly those devices have browsers geared towards displaying/flowing/reducing webpages. If at all possible, let the browser do the work.

大多数情况下,这些设备都有适合显示/流动/缩小网页的浏览器。如果可能的话,让浏览器完成工作。

#2


7  

There's no easy way to ensure pixel-perfect accuracy across mobile browsers (actually, there's no easy way to do that with any browser). There are, however, some methods to help with that kind of work. For example, mobile Safari for the iPhone supports a 'viewport' meta tag that allows you to specify attributes like width. Here are some examples of usage:

没有简单的方法可以确保移动浏览器的像素完美准确性(实际上,任何浏览器都没有简单的方法)。但是,有一些方法可以帮助完成这种工作。例如,iPhone的移动版Safari支持“视口”元标记,允许您指定宽度等属性。以下是一些用法示例:

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

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

Apple has some information here, and you'll find a lot more information across the web.

Apple在这里提供了一些信息,您可以在网上找到更多信息。

#3


1  

G'day,

天儿真好,

I know you're question is to decide on making a selection of the optimum screen size to work on all phones but that approach soon wears thin with users.

我知道你的问题是决定选择适合所有手机的最佳屏幕尺寸,但这种方法很快会与用户相比变薄。

A large web site I'm associated with takes the UserAgent string and normalises it to a common denominator, e.g. over 300 different UA strings in use in the UK for a particular Sony Ericsson phone type so they all get converted to the same string, and then does a lookup into a table to determine screen real estate.

我与之关联的大型网站采用UserAgent字符串并将其标准化为公分母,例如针对特定的索尼爱立信手机类型,英国使用了300多种不同的UA字符串,因此它们都转换为相同的字符串,然后查找表格以确定屏幕空间。

The coders also have access to the current connection speed which is deduced by a geolocation application based on connection type, routing type, etc. at the time of the request. You don't want to be sending rich, high-def media to someone with a slow connection.

编码器还可以访问当前连接速度,该速度是在请求时基于连接类型,路由类型等由地理定位应用程序推断的。您不希望向连接速度较慢的人发送丰富的高清媒体。

This is then used to

然后用这个

  1. decide if rich content can be served, and then
  2. 决定是否可以提供丰富的内容,然后
  3. select the optimum format for the content.
  4. 选择内容的最佳格式。

HTH

HTH

cheers,

干杯,

#4


0  

You could always use "ems" instead of pixels they should scale properly.

您可以始终使用“ems”而不是像素,它们应该正确缩放。

This is still a touchy subject since many mobile browsers basically interpret what you have depending on how the devs wanted to make it interpret.

这仍然是一个棘手的主题,因为许多移动浏览器基本上解释了你拥有的东西,这取决于开发者想要如何解释。

#1


3  

IMHO the best practise is to get along without too many assumptions about width and resolution of the clients device.

恕我直言最佳做法是在没有太多关于客户端设备的宽度和分辨率的假设的情况下相处。

Mostly those devices have browsers geared towards displaying/flowing/reducing webpages. If at all possible, let the browser do the work.

大多数情况下,这些设备都有适合显示/流动/缩小网页的浏览器。如果可能的话,让浏览器完成工作。

#2


7  

There's no easy way to ensure pixel-perfect accuracy across mobile browsers (actually, there's no easy way to do that with any browser). There are, however, some methods to help with that kind of work. For example, mobile Safari for the iPhone supports a 'viewport' meta tag that allows you to specify attributes like width. Here are some examples of usage:

没有简单的方法可以确保移动浏览器的像素完美准确性(实际上,任何浏览器都没有简单的方法)。但是,有一些方法可以帮助完成这种工作。例如,iPhone的移动版Safari支持“视口”元标记,允许您指定宽度等属性。以下是一些用法示例:

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

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

Apple has some information here, and you'll find a lot more information across the web.

Apple在这里提供了一些信息,您可以在网上找到更多信息。

#3


1  

G'day,

天儿真好,

I know you're question is to decide on making a selection of the optimum screen size to work on all phones but that approach soon wears thin with users.

我知道你的问题是决定选择适合所有手机的最佳屏幕尺寸,但这种方法很快会与用户相比变薄。

A large web site I'm associated with takes the UserAgent string and normalises it to a common denominator, e.g. over 300 different UA strings in use in the UK for a particular Sony Ericsson phone type so they all get converted to the same string, and then does a lookup into a table to determine screen real estate.

我与之关联的大型网站采用UserAgent字符串并将其标准化为公分母,例如针对特定的索尼爱立信手机类型,英国使用了300多种不同的UA字符串,因此它们都转换为相同的字符串,然后查找表格以确定屏幕空间。

The coders also have access to the current connection speed which is deduced by a geolocation application based on connection type, routing type, etc. at the time of the request. You don't want to be sending rich, high-def media to someone with a slow connection.

编码器还可以访问当前连接速度,该速度是在请求时基于连接类型,路由类型等由地理定位应用程序推断的。您不希望向连接速度较慢的人发送丰富的高清媒体。

This is then used to

然后用这个

  1. decide if rich content can be served, and then
  2. 决定是否可以提供丰富的内容,然后
  3. select the optimum format for the content.
  4. 选择内容的最佳格式。

HTH

HTH

cheers,

干杯,

#4


0  

You could always use "ems" instead of pixels they should scale properly.

您可以始终使用“ems”而不是像素,它们应该正确缩放。

This is still a touchy subject since many mobile browsers basically interpret what you have depending on how the devs wanted to make it interpret.

这仍然是一个棘手的主题,因为许多移动浏览器基本上解释了你拥有的东西,这取决于开发者想要如何解释。