1

情况：

为我的工作开发一个自适应网站。我已经为我的 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）（更重要的是）有没有办法让我看到我的网站在高分辨率笔记本电脑上的样子

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

谢谢！

4

2 回答 2

2

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

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

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

于 2014-01-28T10:04:48.167 回答
2

您可以简单地将这些插件用于 chrome：https ://chrome.google.com/webstore/detail/dimensions/hdmihohhdcbejdkidbfijmfehjbnmifk 或 https://chrome.google.com/webstore/detail/troy/hflapaedaljpdhhdcdgkmhgmcncdchca

于 2014-01-28T10:46:07.347 回答