问题标签 [device-width]

我已经对移动屏幕宽度进行了研究，但有些事情我也无法直接回答。

以 iPhone 4 为例，在这个网站上它的宽度为 640 像素，高度为 960 像素。但是它的设备宽度为 320 像素。什么是设备宽度？我正在制作一个响应式网站，这个设备宽度似乎是一个关键部分。设备宽度是否给定尺寸，以便网站正确缩放？它比桌面站点更小，否则它们将缩放到与桌面显示器几乎相同的分辨率？能否请一些机构解释与实际宽度相关的设备宽度，如果可能的话，请在响应式网页设计和视口元标记的上下文中解释。

我们正在查看一个宽度为 1230 左右的现有（非响应式）站点。因此，在移动设备上，其内容即使按原样压缩，也会在右侧损失约 10% 的折扣。

这很糟糕，因为他们的电话号码（大到足以看到，甚至在手机上压缩）是右对齐的，除非观众滚动浏览，否则我们会丢失一些数字。

作为一种快速的权宜之计，我想我们可以设置：

<meta name="viewport" content="width=1235">

但这在我正在测试的手机上被忽略了。

我已经检查过手机响应的视口宽度要低得多——如果我将其设置为 300 或其他比我放大内容（左上角）的值，正如你所期望的那样。只是它不响应超过 1024 的视口设置。

更新 12/2020：鉴于这篇文章仍然活跃，我必须强调这里没有适用于现代 Web 开发的答案。实际上，这里的几乎所有答案都会使您的网站在容纳残疾人方面处于不稳定的境地。head您的响应式网站应该在标签中包含的唯一内容是：

如果您试图将用户锁定在特定范围内（例如诉讼甚至政府罚款），那么不仅仅是用户体验面临风险。

-- 继续自担风险 --

更新 03/2019：这个问答仍然有一些活动，近 5 年我的问题出现了。请注意，此问题的部分原因是当时较旧的移动设备更常见的违规行为。对于当今的浏览器和设备，摆弄视口可伸缩性将是解决更大问题的鞋拔，这可能是您的 CSS 或您的标记中的问题。

我已经建立了十几个响应式站点，但从未遇到过这个问题。基本上，我使用宽度=设备宽度的视口元标记，但 iPhone 和 Android 设备仍在缩放。出于某种原因，我在 Windows 手机上没有这个问题。

这是head html的摘录：

这是主要包装器的 HTML（注意最外层的 div 是从 jquery.mobile 添加的：

这是主要的包装 CSS：

Bootstrap 也在样式表之前被加载。

我已经尝试了许多不同的方法，包括：

• 删除 jquery.mobile
• 删除引导程序
• 将引导程序更新到最新版本
• 将视口标签更改为以下内容：
• 宽度=设备宽度，初始比例=1.0
• 宽度=设备宽度，初始比例=1.0，用户可缩放=否
• 宽度=设备宽度，初始缩放=1.0，用户可缩放=0
• 宽度=设备宽度，初始比例=1.0，最小比例=1.0，最大比例=1.0
• 调整与宽度/最大宽度相关的各种 CSS 属性

我完全没有想法，似乎已经用尽了我能通过谷歌找到/尝试的任何新东西。我将不胜感激您能提供的任何帮助！

我正在尝试遵循 Bootstrap 教程，但我创建的第一个 div 应该跨越我的浏览器/设备的整个宽度，似乎限制在 ~1000 像素。关于为什么会这样的任何想法？

这是我的代码：

提前感谢您的帮助。

我的手机 (LG G2) 的视口大小为 360 像素 598 像素。Col-xs 针对小于 768px 的设备，这意味着无论用户处于纵向还是横向模式，他都会得到相同的结果，即使在横向模式下我可以显示更多元素，因为它的宽度更大。这就是为什么我想知道为什么最小的媒体查询在引导程序中是 768px，这没有考虑到手机的纵向/横向视图。

谢谢你的澄清。

我正在第四代 iPad 上测试一个网站，它的像素大小为：2048px x 1536px，但它激活了我的“移动”媒体查询（纵向视图），它是 768px 及以下，它激活了我的“平板电脑”媒体查询（在横向视图中），即 769px 和 1024px。

我很好奇它为什么会这样？

我在头部使用这个元标记，我确定这就是它这样做的原因，

而且我没有抱怨，我认为这是它应该工作的正确方式。我只是对它为什么起作用感到困惑？将 1536px 变成 768px 的魔法是什么？

这里我想根据设备宽度设置元标记，我将更详细地解释我的问题：

现在，我有一个网站，有移动版和完整版，移动版只能在宽度小于 480px 的移动设备上运行，而完整版适用于其他宽度。

当我尝试设置元标记时出现问题，如果我将其设置为：

我在移动设备上工作得很好，并且网站在平板电脑中显示为放大。

如果我使用这个：

我在台式机和平板电脑上工作得很好，而且手机版肯定不会出现在手机上。

那么解决方案是什么，我想在我的标题HTML中添加类似的内容：

那么如何做到这一点呢？

我正在编辑其他人的 CSS。他们对 iPad 使用了两种媒体查询（一种用于纵向，一种用于横向），这似乎在一些较大的 Android 手机和平板手机上造成了问题。

我觉得很奇怪的是，几乎每个人都推荐他们使用的 CSS，尽管它在 Android 设备上极易受到攻击。

此查询的作用是：它使用 min-device-width 和 max-device-width 的组合来确定设备是 iPad。它使用 'orientation' 参数来确定设备是纵向还是横向（在 iOS 设备上，设备宽度始终是纵向模式下的宽度，即使设备当前处于横向模式）。

这是似乎导致问题的 CSS：

现在的问题是，定义最小和最大设备宽度为这些样式也应用到其他设备留下了很大的空间。宽度在 768px 和 1024px 之间的任何东西都被视为 iPad。

在我的例子中，样式指定屏幕底部的自定义按钮栏正好是 768 像素宽。还有一些类似的东西。这适用于 iPad，但不适用于宽度相似但不同的设备。所涉及的 Android 设备上的按钮正在从屏幕上脱落。

所以我现在使用的是：

这似乎完全针对所有 iPad。我知道所有 iPad 的“设备宽度”都是 768 像素，即使它们的分辨率更高。

所以我很确定我做对了。但由于这是一个很常见的问题，而且其他人都说要使用 MIN-device-width 和 MIN-device-height，我仍然很高兴听到其他人对此的看法。

我正在为一个完全位于 Android 和 iOS 移动应用程序的 web 视图中的网上商店做一些 CSS。我正在使用媒体查询来区分手机和平板电脑。

我想出了一种方法来保持我的规则简单：有一个“电话”布局适用于设备宽度低于 768 像素的任何东西。其他一切都是平板电脑布局。这对我的目的来说很好。

内容显示在应用程序中，该应用程序在所有手机上都强制进入纵向模式。因此，如果用户倾斜他们的手机，比如 700 x 900 像素，他们的设备宽度仍然是 700 像素。所以这一切都很好。

有一段时间，我认为随着所有新移动设备的出现，事情一定会变得丑陋，因为它们具有超高分辨率。这意味着我将在这些手机上获得平板电脑布局。

幸运的是，操作系统和设备制造商已经提前解决了这个问题，像素值现在比实际的像素数要小得多。有一个名为的属性device-pixel-ratio，在新设备上具有 1.5 或 2.0 或 3.0 之类的值：只有当您将报告的像素乘以该比率时，您才能得到实际像素的数量。

伟大的。

现在我想知道：这种设置（“假”像素大小）是否适用于所有基于像素的 CSS 值？最具体地说，它是否适用于以下所有属性：

• width
• device-width
• min-width
• min-device-width
• max-width
• max-device-width （高度也一样）

还是这些婴儿中的一些获得“真实”像素数，而其他婴儿获得“假”像素？

编辑：

Chris 在他的回答中解释说，设备像素比为 2 的假设 700x900px 设备将报告“350px”width和“700px” device-width。因此，如果我想进行媒体查询，将此设备与其他手机大小的设备以及任何 iPad 宽度或以上的设备作为平板电脑进行分组，这是否是正确的媒体查询...

（是的，我知道该orientation属性也适用于 iOS 设备，但让我们暂时忽略它）

我有疑问，我可以应用/使用 device-width 来设置 div 的样式，而不是为 div 提供 100% 的样式吗？

我尝试了它的工作，但不确定它是否是好的做法。

`

`

还是我做错了？

提前致谢。