如何测试视网膜显示网页？

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

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

或者，是否有类似于苹果视网膜显示屏的显示器(不是苹果的 MacBook 或 iPad) ？

先谢谢你。

69696 次浏览
小开

GitHub 上有一个 JavaScript 网络视网膜模拟器。

您也可以使用 Opera Mobile 模拟器来测试自定义分辨率。

如果你有一台旧的苹果电脑(没有视网膜显示器) ，你可以用 Quartz Debug 模拟视网膜显示器，这是一个 XCode 内置的工具。此外，在 XCode 中，您可以使用 iOS 模拟器测试带有视网膜显示器的 iOS 设备。

小开

你可以添加这个 css。所有的东西看起来都是原来的2倍大，但是如果有任何问题的话，它可以很容易的被发现。Javascript Web Retina 模拟器不适合我(在 Safari 中是模糊的)

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

缩放: 200% 适用于 webkit,-moz 适用于 Firefox，所以 Safari/Chrome/Firefox 可以工作，IE 不一定行。

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

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

光有代码是不行的。如果您正在使用媒体查询，您应该将像素比率切换为1，而不是1.5或2，以完成这项工作。否则它不会切换到更高分辨率的图像。

小开

关于: Firefox 上的 config hack

你实际上可以使用 Firefox:

  1. 转到 about:config
  2. 找到 layout.css.devPixelsPerPx
  3. 改变它到你想要的比例(1为正常，2为视网膜，等等)

截图:


(资料来源: Staticflickr.com)

刷新您的页面-繁荣，您的媒体查询现在启动！向 Firefox 致敬，因为它在网页开发方面非常棒！

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

这种解决方案的优点是它将触发媒体查询和其他高级逻辑。如果你没有这样做，你只是给每个人提供 HiDPI 图片，你可以用 Chrome 等浏览器放大(或者编写 CSS 为你放大，如果你的船浮动)。

在 Firefox & Edge 上放大

当前在 Firefox 和 Edge 上，如果缩放它会触发基于 dppx 的媒体查询。因此，这种简单的方法可能就足够了，但是要注意，这个功能被报告为“不会修复”Firefox 的 臭虫，所以这可能会改变。

小开

你可以用 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

小开

只需在 Firefox 或 Chrome 中进入响应模式，并编辑可选择的分辨率: 带有 HiDPI 屏幕的笔记本电脑。它可以完成这项工作! ;)


提交答案