针对移动应用到桌面的 CSS 媒体查询

Posted 2023-03-06

【中文标题】针对移动应用到桌面的 CSS 媒体查询

【英文标题】：CSS Media Queries targeted for mobile applying to desktop

【发布时间】：2014-05-29 23:13:21

【问题描述】：

网页：www.mathias-syversen.net

您好，这是我的第一篇文章，请多多关照！ 我正在尝试使用@media 查询来检测屏幕尺寸和设备来制作一个移动友好的网页。

问题是，如果我让查询在移动设备上工作，它也适用于桌面版本。可能是因为最大/最小宽度太大，无法弥补新智能手机的高分辨率。

@media only screen and (min-device-width: 420px) and (max-device-width : 768px) 仅适用于 iPad，不适用于台式机或安卓手机。

尝试了无数种最大和最小屏幕宽度的组合，每次在移动设备 (android) 上运行时，它也适用于桌面。

如果我尝试检测像素比，它可以在智能手机上工作，但也适用于桌面（至少在 OS X 上，可能是因为它有视网膜显示器）

我想要的是一种简单的方法来确定设备是否不是桌面，并应用正确的 css，无论它是 android、ios、手机还是平板电脑。

---

@media screen and (max-width: 800px), (max-device-width: 480px), (max-device-width: 768px)

现在可以在桌面 > 800 像素、平板电脑和移动设备上使用。据我测试，这似乎解决了我的问题。

【问题讨论】：

您还有哪些其他媒体查询规则适用于移动设备和桌面设备？

如果我使用像素比 2，它适用于（适用于）台式机、平板电脑和移动设备。如果我使用横向横向，它适用于平板电脑和移动设备，但也适用于桌面。

我知道这是一个“手持”选项，但据我所知，iOS 和 android 都忽略了这个

【参考方案1】：

@media only screen and (min-device-width: 420px) and (max-device-width : 768px) 仅适用于 iPad，不适用于桌面或安卓手机。

这意味着它适用于分辨率介于 420 和 768 像素之间的设备，因此它不适用于分辨率低于或高于此值的设备。如果您在 mozilla 上安装了 Web 开发人员工具，请按 Ctrl+Shift+M 并尝试调整窗口大小，如果在此分辨率比例 (420 -> 768) 中不适用，则可以在其中看到实际分辨率，应该是 CSS 错误，尝试验证您的代码。

PS：希望我能正确回答您的问题。

【讨论】：

是的，我知道，问题是，例如 S4 有一个全高清显示屏，所以检查宽度会起作用，但它也适用于台式电脑。

好吧@media 查询适用于设备/屏幕分辨率，而不是您正在查看的设备类型。与大多数笔记本电脑/显示器一样，​​较新的手机具有更大的分辨率。所以它会为他们应用指定的分辨率，比方说大于 1024。我的意见是你应该使用一个 >1024 的分辨率，这将适用于几乎所有平板电脑/笔记本电脑/台式机和具有大分辨率的新手机，以及其他分辨率使用新的查询。例如在 Iphone4 上仍然可以使用 320 分辨率（只是通知 Iphones 复制了字体大小和其他属性，因为视网膜）

你可以使用 -webkit-text-size-adjust: none;在你的身体上以防止它，或者像这样：font-size:16px; -webkit-字体大小：16px；用于特定 div 上的字体大小

【参考方案2】：

我应该指出我也在学习响应式，所以我可能不是 100% 正确。

视口和像素分辨率（在移动设备上）不一样。考虑在您的手机上加载一个标准的 960 像素网页。你可以看到这一切，但如果你认为 iPhone 没有 960 像素的宽度（纵向）；它的分辨率是 320（iPhone 3、3G、3GS）或 640（4 及以上）。 那么为什么您会看到整个页面？它会缩放或缩小页面以适应视口。在 iPhone 上，它的默认宽度是 980px，因此基于 960px 网格系统的页面看起来不错，您不需要水平滚动，甚至边距两边都有 10px。

因此，默认视口宽度大小为 980 像素，但原始分辨率宽度为 320 像素或 640 像素，具体取决于手机型号。为了进一步增加复杂性，所有 iPhone 都使用相同的 320 像素视口宽度。当页面加载并且它不适合移动设备时，您实际上是在查看 3 倍缩小 (980 / 320)。

请注意，默认情况下，移动设备将向外扩展至最大 - 您无法再进行缩放或缩小。使用 iPhone 示例，您不能缩小超过 980 像素。如果页面超出 980 像素，则需要水平滚动页面。

如果您正在查看默认大小 (980 像素) 的页面并放大该页面的一部分（您可以放大到 100%），您只会看到该页面的一部分页面。

考虑到移动设备，除非您正在查看的网页在头部下方包含元标记，否则它将放大/缩小其默认视口大小。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这告诉浏览器其窗口的宽度应该等于设备的原生视口宽度（注意，这不一定与原生分辨率宽度相同）并且它应该缩放为 1 ，或 100%。

我建议您查看Viewport Sizes 以引用您要定位的设备。

根据网站，Galaxy S4 的视口尺寸为 360 x 640。

概念证明

创建一个div，设置2个样式：

背景颜色蓝色 背景颜色为红色最大宽度为 360 像素

在 S4 上以纵向和横向方式查看页面。 div 应该改变颜色；纵向应该是红色的，横向应该是蓝色的。

确保在文档的头部包含上面的 meta 标签。

根据我所做的研究，在设备上查找本机视口大小要容易得多 - 即当您以 1 / 100% 的比例查看浏览器窗口时。在设备上找到默认视口大小比较困难，但幸运的是，当您为移动设备进行设计时，它是您最关心的原生视口大小。

【参考方案3】：

您必须真正确定要使用哪些断点。我建议如果您使用 (max-width:959px) 这将包括从移动设备到平板电脑的景观和非常小的 res 小型计算机。然后 (min-width:960px) 这是从笔记本电脑到台式机的断点。在媒体查询中，一开始就确定哪些断点非常重要，因为这最终会变得不堪重负。

 /** this is for mobile to little laptops res**/
  @media only screen and (max-width:959px) 
     

 /** this is for little laptops res to desktop**/
 @media only screen and (min-width:960px)