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