90

有没有办法在 Windows 上模拟 Retina 显示器来测试网站的 HiDPI 显示器，例如 Retina？

我在标准的 24" 1920x1080 显示器上运行 Windows。昨晚我在朋友全新的 15" Retina MacBook Pro 上查看了我的网站，图形看起来都很模糊（比普通的 15 英寸 MacBook 差得多），而字体是超级清晰锐利，由于直接比较，使徽标看起来更糟。

我已按照本教程使我的网站 Retina 准备就绪：

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

我使用了retina.js 方法，因为我没有任何背景图片。

我有什么方法可以测试这是否真的有效？显然，我可以让我的朋友使用他的 Retina Notebook，但这对我来说不是一个可行的工作流程。我希望能够在我自己的环境中至少粗略地测试网站的 Retina 兼容性。

4

9 回答 9

153

关于：Firefox 上的配置破解

您实际上可以使用 Firefox：

  1. 转到“关于：配置”
  2. 找到“layout.css.devPixelsPerPx
  3. 将其更改为您想要的比例（1 表示正常，2 表示视网膜等。-1 似乎是默认值。）

截图：（来源：staticflickr.com）


刷新您的页面 - 繁荣，您的媒体查询现在开始了！向 Firefox 致敬，因为它非常适合 Web 开发！注意，现在不仅网站的大小将扩大一倍，Firefox UI 也将翻倍。这种加倍或缩放是必要的，因为这是您能够检查标准像素比率屏幕上所有像素的唯一方法。

这在带有 Firefox 21.0 的 Windows 7 以及带有 Firefox 27.0.1 的 Mac OS X 上运行良好。

如果您不使用媒体查询和其他更高级的逻辑（即您正在向每个人提供 HiDPI 图像），您可以使用浏览器将其放大到 200%。Chrome 仿真是一个有用的工具，它可以启动媒体查询，但因为它可以防止缩放，所以您无法检查图像质量。

放大 Firefox 和 Edge

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

于 2013-06-21T05:17:11.317 回答
25

在 Google Chrome 版本“33.0.1720.0 Canary”中，您现在可以使用“设备像素比”、“android 字体指标”和“视口仿真”等大量参数来模拟 iPhone5 等设备。

不再需要那个 Firefox hack —— 无论如何都很难使用。

感谢 Google 开发团队！！:)

于 2013-11-27T10:48:09.610 回答
14

在 chrome 中，您可以通过以下方式完成：

1) 打开 Chrome 开发者工具并点击小“齿轮”图标。 在此处输入图像描述

2) 然后选择“在控制台抽屉中显示‘仿真’视图”。 在此处输入图像描述

3) 最后，在 Developer Tools 中打开“控制台抽屉”，然后选择Emulation。设置模拟屏幕并将设备像素比设置为 2.5。

在此处输入图像描述

于 2014-04-22T23:04:59.760 回答
10

据我所知，除了购买视网膜设备之外，这是不可能的。

一些解决方法

不太相关

于 2013-03-21T16:59:34.743 回答
7

使用 Google Chrome 模拟 Retina (HiDPI) 显示的当前方法

1)在网页上“右键单击”然后选择“检查”打开 Chrome 的开发者工具

2)单击“切换设备模式”图标

单击切换设备模式图标

3)在屏幕顶部的设备下拉框中，选择“带 HiDPI 屏幕的笔记本电脑”

选择带有 HiDPI 屏幕的笔记本电脑

4)您现在可以查看网站在 Retina aka HiDPI 屏幕上的外观

于 2016-03-10T11:06:17.697 回答
2

谷歌浏览器版本 80

  1. 打开开发者工具ctrl-shift j
  2. 通过点击左上角的平板电脑/手机图标来切换设备工具栏（点击它会变成蓝色）

在此处输入图像描述

  1. 现在视口上方应该有一个工具栏。单击右上角的选项图标（3 个点），然后选择添加设备像素比选项。

在此处输入图像描述

  1. 您现在应该在工具栏上看到该选项。从这里您可以切换到 1x、2x 或 3x。

在此处输入图像描述

  1. 当您进行测试时，请确保每次更改像素比率时都点击刷新按钮。如果您将比率设置为 2x，然后将其设置回较低，那么您将看不到任何更改，因为如果浏览器已经获取 2x 或更高，则浏览器将不会获取 1x 资产。
于 2020-03-05T05:56:15.020 回答
1

我使用图像大小调整库来动态创建图像。对于 2x 版本，我在调试过程中添加了一个动态水印 - 这可以很容易地查看高分辨率图像是否实际显示。发现它很有帮助。

它的工作方式会有所不同，因此不包括示例代码。

于 2017-11-21T23:18:45.063 回答
-1

我不知道这是否太简单了，我按 ctrl 并滚动它会触发媒体查询。我已经在 bugzilla 中检查过了，它可以工作。我不确定 svg 缩放，因为它看起来很模糊，但它是 svg 图像。

于 2014-09-24T17:33:24.460 回答
-3

如果您有 mac（或 mac osx 虚拟机），则可以将 ios 模拟器与 xcode 一起使用。它确实把窗户炸了两倍大，所以它不是现实生活中的样子，但会清楚地告诉你你的图像是否模糊。

于 2014-04-14T13:59:47.470 回答