网页：www.mathias-syversen.net
你好，这是我的第一篇文章，所以要善良！我正在尝试使用@media查询创建一个移动友好的网页来检测屏幕大小和设备 .
问题是，如果我让查询与移动设备一起使用，它也适用于桌面版 . 可能是因为最大/最小宽度太大，以补偿具有高分辨率的新智能手机 .
@media only屏幕和（min-device-width：420px）和（max-device-width：768px）仅适用于iPad，但不适用于台式机或Android移动设备 .
尝试了无数的最大和最小屏幕宽度组合，每次它在移动设备上工作（android）它也适用于桌面 .
如果我尝试检测像素比率，它适用于智能手机，但也适用于桌面（至少在OS X上，可能因为它有视网膜显示）
我想要的是一种简单的方法来确定设备是否不是桌面，并应用正确的CSS，无论其Android，iOS，手机或平板电脑 .
@media screen和（max-width：800px），（max-device-width：480px），（max-device-width：768px）{}
现在适用于桌面> 800px，平板电脑和移动设备 . 据我所测试，这种接缝可以解决我的问题 .
2 回答
我应该指出我也在学习反应，所以我可能不是100％正确 .
视口和像素分辨率（在移动设备上）不一样 . 考虑在手机上加载标准的960px网页 . 你可以看到这一切，但如果你认为iPhone的宽度不是960像素（肖像）;它的分辨率是320（iPhone 3,3G，3GS）或640（4及以上） . So why do you see the whole page? 它缩放或缩小页面以使其适合视口 . 在iPhone上它的默认宽度是980px，因此基于960px网格系统的页面看起来很好，你甚至没有任何一边10px的边距 .
因此，默认视口宽度大小为980px，但原始分辨率宽度为320px或640px，具体取决于手机型号 . 为了进一步增加复杂性，所有iPhone都使用相同的视口宽度320px . 当页面加载并且它不适合移动设备时，您实际上正在查看3 x缩小（980/320） .
请注意，默认情况下，移动设备会缩小到最大值 - 您无法再缩放或缩小 . 使用iPhone示例，您无法缩小超过980px . 如果页面超出980px，则需要水平滚动页面 .
如果您正在查看默认大小（980像素）的页面并放大该页面的一部分（您可以放大到100％缩放），您只会看到该页面的一部分 .
考虑移动设备，除非您的网页是're viewing contains the meta tag below in the head section, it will zoom / scale out of it' s default 视口大小 .
这告诉浏览器其窗口的宽度应该等于设备的本机视口宽度（注意，这不一定与原始分辨率宽度相同） and 它应该按1或100％缩放 .
我建议您查看Viewport Sizes以引用您要定位的设备 .
根据该网站，Galaxy S4的视口尺寸为360 x 640 .
Proof of concept
创建一个div，设置2个样式：
背景颜色为蓝色
背景颜色为红色，最大宽度为360像素
以纵向和横向查看S4上的页面 . div应改变颜色;在肖像中它应该是红色的，景观应该是蓝色的 .
确保在文档的头部包含上面的 meta 标记 .
从我已经完成的研究中，在设备上找到原生视口大小要容易得多 - 即，当您以1/100％的比例查看浏览器窗口时 . 在设备上查找默认视口大小更难，但幸运的是，当您设计移动设备时，它是您最关心的本机视口大小 .
这意味着它可以在分辨率在420和768px之间的设备上工作，因此它不适用于分辨率低于或高于此的设备 . 如果您在mozilla上安装了Web开发人员工具，请按Ctrl Shift M并尝试调整窗口大小，在那里您可以看到它的实际分辨率，如果它不适用于此分辨率（420 - > 768），它应该是CSS错误，尝试验证您的代码 .
PS：希望我的问题正确无误 .