74

我编写了一个用于视网膜显示的网页。我目前没有视网膜显示器。

是否有任何模拟器应用程序或工具来测试网页的视网膜显示？

或者，是否有类似于 Apple 视网膜显示器的显示器（不是 Apple 的 MacBook 或 iPad）？

提前致谢。

4

6 回答 6

115

关于：Firefox 上的配置破解

您实际上可以使用 Firefox：

  1. 去about:config
  2. 寻找layout.css.devPixelsPerPx
  3. 将其更改为所需的比例（1 表示正常，2 表示视网膜等）

截图：（来源：staticflickr.com）


刷新您的页面 - 繁荣，您的媒体查询现在开始了！向 Firefox 致敬，因为它非常适合 Web 开发！

这是在带有 Firefox 21.0 的 Windows 7 上完成的。

这个解决方案的优点是它会触发媒体查询和其他高级逻辑。如果您不这样做，而只是为每个人提供 HiDPI 图像，则可以使用 Chrome 等放大（或者编写 CSS 来为您缩放，如果这会让您的船漂浮）。

放大 Firefox 和 Edge

目前在 Firefox 和 Edge 上，如果你缩放它会触发基于 dppx 的媒体查询。因此，这种更简单的方法可能就足够了，但请注意，该功能被报告为 Firefox的“无法修复”错误，因此这可能会改变。

于 2013-06-21T05:18:13.710 回答
20

您可以使用 Chrome 浏览器检查视网膜显示是否正常工作，请使用本指南

  1. 打开Chrome Browser然后right click点击inspect element
  2. 在底部栏中，您会发现一些选项卡console, search, emulation and rendering
  3. 单击选项卡emulation，然后拉起栏选项卡，如下所示
  4. 根据上的菜单left调整，调整设备，屏幕等。

请查看本文以获取详细指南：http ://www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html

于 2014-09-02T03:22:53.730 回答
4

你可以添加这个CSS。一切看起来都是 2 倍的大小，但如果有任何问题，它很容易发现。Javascript Web Retina Emulator 对我不起作用（在 Safari 中模糊）

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

zoom: 200% 适用于 webkit，-moz 适用于 firefox，因此 Safari/Chrome/Firefox 这将起作用，不确定 IE。

如果你应用 -webkit-transform: scale(2) 东西会看起来很模糊，所以你需要使用 zoom: 200%;

于 2013-05-15T16:34:01.380 回答
4

GitHub 上有一个 JavaScript Web Retina Emulator。

您还可以使用 Opera Mobile Emulator 测试自定义分辨率。这里有一个关于如何做到这一点的解释。

如果您有一台较旧的 Apple 计算机（没有视网膜显示器），您可以使用 XCode 中的一个工具 Quartz Debug 模拟视网膜显示器。同样在 XCode 中，您可以使用 iOS 模拟器测试带有视网膜显示器的 iOS 设备。

于 2012-12-23T00:51:10.607 回答
0 
body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

仅凭该代码无法解决问题。如果您使用媒体查询，则应将像素比切换为 1，而不是 1.5 或 2，以达到目的。否则，它不会将图像切换到更高分辨率的对应物。

于 2013-06-12T08:49:05.523 回答
0

只需在 Firefox 或 Chrome 中进入响应模式，然后编辑分辨率以选择：带 HiDPI 屏幕的笔记本电脑。它会做的工作！;)

于 2020-04-23T08:27:01.430 回答