如何测试用于Retina显示屏的网页？

70

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

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

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

提前致谢。

webpage retina-display

— 山岩254
source

高清晰度显示器和视网膜显示器之间是否也有相似之处？

— Sangam254'9

1

可能重复如何在没有实际Retina显示屏的情况下在Windows上测试Retina网站？

— andrewb '16

113

关于：在Firefox上配置hack

您实际上可以使用Firefox：

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

屏幕截图：

刷新页面-繁荣发展，您的媒体查询现已开始！向Firefox致敬，因为它们对Web开发非常有用！

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

该解决方案的优点是它将触发媒体查询和其他高级逻辑。如果您不这样做，而您只是向所有人提供HiDPI图像，则可以使用Chrome等进行缩放（或者编写CSS进行缩放，以防浮动）。

放大Firefox和Edge

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

— 安德鲁布
source

7

在我的Firefox版本24上，默认值为-1，因此只需将其设置为-2。或将其设置为2以获得反向效果，这也很有用。

— 马里奥·阿瓦德

3

真奇怪，我的（OS X 10.7和Win 7上的FF 24）不接受-2的值，或者至少它没有任何区别。我的默认值实际上是-1，我想知道这是否意味着没有缩放计算或其他内容。

— andrewb

2

在FF 31 / Win7上，根据您的样式表，将其设置为（+）1.5效果很好，而不会使窗口太大。尽管默认值为-1，但将其设置为负值似乎不会触发更高的DPI显示。

— nickb 2014年

@nickb请记住，1.5小于标准的Retina像素每px比率2，因此可能不会触发媒体查询。

— andrewb 2014年

1

@andrewb是的，Retina需要2倍。取决于您是否需要超出默认像素比率或特定目标的任何内容。如果您的高DPI图像更通用（即> 1.0，而不是Retina设备），则1.5足够，如果没有，则根据需要提高。

— nickb 2014年

20

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

打开Chrome Browser并right click然后单击inspect element
在底部的栏中，您会找到一些标签 console, search, emulation and rendering
点击标签 emulation，然后拉起条形标签，如下所示
根据上的菜单进行left调整，调整设备，屏幕等。

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

— e
source

4

如果在步骤2中看不到底部的栏，请在开发人员控制台仍打开的情况下按Escape键。这将切换底部的标签栏。

— 山姆

4

有一个JavaScript Web Retina模拟器GitHub上。

您还可以使用Opera Mobile仿真器测试自定义分辨率。这里有关于如何执行此操作的说明。

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

— 内鲁
source

4

您可以添加此CSS。一切看起来都是大小的2倍，但是如果有任何问题，它很容易发现。Java Web Retina模拟器对我不起作用（Safari中模糊不清）

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

缩放：200％适用于webkit，-moz适用于firefox，因此Safari / Chrome / Firefox可以使用，不确定IE。

如果您应用-webkit-transform：scale（2），则内容看起来会很模糊，因此您需要使用zoom：200％;

— 安慰剂
source

4

正如Daniel所说，仅凭代码本身并不能解决问题，因为它不会触发将图像切换到分辨率更高的媒体查询。如果您不使用可改变像素比率的安德鲁布（Andrewb）解决方案，则图像将显得模糊。

— Michael McGinnis

0

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

单靠代码就无法解决问题。如果您使用的是媒体查询，则应将像素比例切换为1，而不是1.5或2，以实现此目的。否则，它不会将图像切换到更高分辨率的图像。

— 丹尼尔·多吉亚努（Daniel Dogeanu）
source

0

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

— 丹
source