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

Question

网页: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){}

现在适用于桌面 > 800px、平板电脑和手机。据我测试，这接缝解决了我的问题。

Answer 1

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

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

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

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

如果您正在查看默认大小 (980px) 的页面，然后放大该页面的一部分(您可以放大到 100%)，您只会看到该页面的一部分页面。

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

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

这告诉浏览器它的窗口宽度应该等于设备的 native 视口(viewport)宽度(注意，这不一定与 native 分辨率宽度相同)并且它应该缩放为 1 , 或 100%.

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

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

概念验证

创建一个div，设置2种样式:

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

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

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

根据我所做的研究，在设备上找到 native 视口(viewport)大小要容易得多 - 即当您以 1/100% 的比例查看浏览器窗口时。查找设备上的默认视口(viewport)大小比较困难，但值得庆幸的是，当您针对移动设备进行设计时，您最关心的是 native 视口(viewport)大小。