面向移动应用于桌面的CSS媒体查询

Question

网页: www.mathias-syversen.net

你好，这是我的第一篇帖子，所以请见谅！我试图制作一个移动友好的网页使用@媒体查询来检测屏幕大小和设备。

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

@media屏幕和(最小设备宽度:420 or )和(最大设备宽度:768 or)只适用于iPad，而不适用于桌面或安卓移动设备。

尝试了最大屏幕宽度和最小屏幕宽度的不可数组合，每次在移动(android)上工作时，它也适用于桌面。

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

我想要的是一种简单的方法来判断设备是否不是桌面，并应用适当的css，不管它的安卓、iOS、手机还是平板电脑。

@媒体屏幕和(最大宽度:800 max)，(最大设备宽度:480 max)，(最大设备宽度:768 max) {}

现在可以在桌面>800 on、平板电脑和移动设备上工作。据我所测试，这个接缝能解决我的问题。

Answer 1

我应该指出，我也在学习回应，所以我可能不是百分之百正确。

视图和像素分辨率(在移动设备上)并不相同。考虑在你的手机上加载一个标准的960 on网页。您可以看到它的全部，但如果您考虑到iPhone没有960像素的宽度(纵向)，它的分辨率要么是320 (iPhone 3，3G，3GS)或640 (4和更高)。，那么为什么你会看到整个页面呢？ It缩放，或者缩小到页面之外，以适应它的视图。在iPhone上，它的默认宽度是980，因此基于960px网格系统的页面看起来很好，您不需要水平滚动，甚至有10 of的边距。

因此，默认的视口宽度大小为980 on，但本机分辨率宽度取决于电话模型，则为320 on或640 on。为了进一步增加复杂性，所有iPhones都使用320 of的相同视口宽度。当一个页面加载并且它不适合移动设备时，你实际上是在观看3x放大(980 / 320)。

注意，默认情况下，移动设备将扩展到最大--您不能再缩放或缩小。使用iPhone示例，您无法放大到980‘t以上。如果页面扩展到980 If以上，则需要水平滚动页面。

如果您正在查看默认大小的页面(980 at )，并且放大该页面的一部分(您可以缩放到100%)，那么您只会看到该页面的一个部分。

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

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

这告诉浏览器，其窗口的宽度应该等于设备的本机视口宽度(注意，这不一定与本机分辨率宽度相同)和应该缩放为1，或100%。

我建议你看看视口尺寸来参考你想要瞄准的设备。

据该网站称，GalaxyS4的视口尺寸为360×640。

概念的证明

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

1. 本色蓝色
2. 背景红色，最大宽度360 of

在纵向和景观中查看S4上的页面。div应该改变颜色；在肖像中应该是红色，风景应该是蓝色。

确保在文档的开头包含上面的元标记。

从我所做的研究来看，在设备上查找本地视口大小要容易得多--也就是说，当您以1/ 100%的比例查看浏览器窗口时。在设备上找到默认的视口大小比较困难，但谢天谢地的是，当您为移动设备设计时，您将最关心的是本地的viewport大小。

Answer 2

@media屏幕和(最小设备宽度:420 or )和(最大设备宽度:768 or)只适用于iPad，而不适用于桌面或安卓移动设备。

这意味着它是在420到768 on之间的设备上工作的，所以它不适用于比这个分辨率更低或更高的设备。如果您在mozilla上安装了web工具，然后尝试调整窗口的大小，您可以看到窗口上的实际分辨率，如果它不适用于此分辨率(420 -> 768)，则应该是一个CSS错误，尝试验证您的代码。

PS:希望我能把你的问题做对。

Answer 3

您必须真正确定要使用哪些断点。我建议，如果您使用(最大宽度:959 if )，这将包括从移动到平板电脑景观和非常小的res小型计算机。然后(最小宽度: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) {
 }