Question

情况：

为我的工作在自适应网站上工作。我已经为我的2012非视网膜macbook pro和iphone视网膜屏幕正确调整了媒体查询和CSS。但是，我在百思买在视网膜的Macbook pro上尝试新网站时，它正在抓住iphone视网膜屏幕的CSS。我用来定位iphone的媒体查询：

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait) {}

我在低分辨率屏幕上测试高分辨率网站时发现的任何解决方案，只需要将分辨率提高一倍，并且不考虑媒体查询。

1）我是否正在使用适当的媒体查询来查找我正在尝试的内容？ 2）（更重要的是）有没有办法让我在hi res 笔记本电脑上看到我的网站的样子

（我现在不会超越iphone屏幕，因为我没有不同的设备可供测试，而且对于保密协议，我无法发布网站。请告诉我是否还有其他关键代码段需要得到一个可靠的答案）

谢谢！

Answer 1

媒体查询看起来不错。测试：

在Firefox中：转到工具 - ＆gt; Web开发人员 - ＆gt;响应式设计。它会在您的网页上放置一个包装器，您可以选择最大1920px宽的分辨率。
在Chrome中：转到工具 - ＆gt;开发者控制台打开开发人员设置（右下角的齿轮图标）。单击“覆盖”部分。选中“设备指标”框并将屏幕尺寸设置为您要测试的尺寸。
在IE9 +中，转到F12 developer tools并转到“工具”菜单。您可以在那里设置设备分辨率。

更改这些设置将重新呈现页面，并在媒体查询正确时触发它们。

Answer 2

您只需将这些插件用于Chrome：https://chrome.google.com/webstore/detail/dimensions/hdmihohhdcbejdkidbfijmfehjbnmifk 要么 https://chrome.google.com/webstore/detail/troy/hflapaedaljpdhhdcdgkmhgmcncdchca

在低分辨率笔记本电脑上测试高分辨率笔记本

2 个答案: