为移动网页设置页面宽度的最佳设计实践是什么？答案

【问题标题】：What is the design best practice for setting the page width for mobile web pages?为移动网页设置页面宽度的最佳设计实践是什么？
【发布时间】：2010-12-16 09:25:34
【问题描述】：

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

社区中是否有将宽度设置为标准尺寸的最佳做法，以便它适用于大多数现代手机和浏览器？

【问题讨论】：

标签： css mobile width mobile-website screen-resolution

【解决方案1】：

没有简单的方法可以确保跨移动浏览器的像素级精确度（实际上，使用 any 浏览器也没有简单的方法可以做到这一点）。但是，有一些方法可以帮助完成此类工作。例如，iPhone 的移动 Safari 支持“视口”元标记，允许您指定宽度等属性。以下是一些使用示例：

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

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

Apple 有一些信息here，您可以在网上找到更多信息。

【讨论】：

【解决方案2】：

生日，

我知道您的问题是决定选择适用于所有手机的最佳屏幕尺寸，但这种方法很快就会受到用户的青睐。

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

编码人员还可以访问当前连接速度，该速度由地理定位应用程序根据连接类型、路由类型等推导出来。在请求时。您不想向连接速度慢的人发送丰富的高清媒体。

然后用于

决定是否可以提供丰富的内容，然后
为内容选择最佳格式。

HTH

干杯，

【讨论】：

【解决方案3】：

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

这仍然是一个敏感的话题，因为许多移动浏览器基本上会根据开发人员希望如何解释您所拥有的内容来解释它。

【讨论】：

【解决方案4】：

恕我直言，最好的做法是不要过多假设客户端设备的宽度和分辨率。

这些设备中的大多数浏览器都旨在显示/流动/缩小网页。如果可能的话，让浏览器完成这项工作。

【讨论】：