logo标签列表

如何在Windows上测试Retina网站而不需要实际的Retina显示屏？

htmlcssretina-displayretina.js
91

有没有一种方法在Windows上模拟Retina显示屏，以测试诸如Retina等HiDPI显示器的网站？

我在标准的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笔记本电脑，但这对我来说不是可行的工作流程。我希望至少能够在自己的环境中粗略地测试网站的Retina兼容性。

2
可能会有帮助：https://dev59.com/z2ct5IYBdhLWcg3wPLCB - JSuar
@Jsuar：不幸的是，它并不是。JavaScript库似乎无法与retina.js一起使用，而Opera似乎只适用于移动设备。 - Alexander Rechsteiner
2
尝试将所有图像，例如您的标志，制作为SVG而不是png或jpg。 - Seph
9个回答
155

关于在Firefox上使用about:config hack

你可以在Firefox上进行以下操作：

  1. 进入"about:config"
  2. 找到"layout.css.devPixelsPerPx"
  3. 将其更改为所需的比例（正常情况下为1，视网膜屏幕为2等），-1似乎是默认值。

截图:


(来源：staticflickr.com)

刷新页面-完美，现在已经启动了你的媒体查询！向Firefox致敬，因为它非常适合Web开发！请注意，不仅网站现在会增加一倍的大小，Firefox界面也会加倍。这种加倍或缩放是必要的，因为这是你能够在标准像素比例屏幕上检查所有像素的唯一方法。

这个方法在Windows 7系统下Firefox 21.0上以及Mac OS X系统下Firefox 27.0.1上均可行。

如果您没有使用媒体查询和其他更高级的逻辑（即，您正在向每个人提供HiDPI图像），您可以使用浏览器将其缩放至200％。 Chrome模拟器也是一个有用的工具，因为它启动了媒体查询，但是由于它防止缩放，您无法检查图像质量。

Firefox和Edge上的缩放

目前，在Firefox和Edge上进行缩放会触发基于dppx的媒体查询。因此，这种更简单的方法可能已经足够了，但请注意，这一功能在Firefox上被报告为“不会修复”的错误，因此这可能会发生改变。

2
有人知道，Chrome有类似的东西吗？ - Krzysztof Romanowski
@andrewb：我也在想同样的问题，因为它提高了我的声誉（耶！）。也许它被谷歌索引为一个常见的搜索词。 - Alexander Rechsteiner
@ChristinaArasmoBeymer 是的，它可以。 - andrewb
我使用的是Firefox 27.1，你的解决方案似乎在它上面不起作用，相反Chrome Canary有更好的解决方案，如下面的答案所述。 - Mohinder Singh
@MinderSaini 这很奇怪，我刚刚更新到FF 27.0.1，它仍然可以工作。你用的是什么操作系统？还有你设置了什么值？ - andrewb
显示剩余2条评论
26
在Google Chrome版本“33.0.1720.0 Canary”中，您现在可以使用一组出色的参数（如“设备像素比”，“Android字体度量”和“视口仿真”）来模拟iPhone5等设备。
不再需要Firefox hack了-反正很难使用。
感谢Google开发团队！:)
1
我没有看过MediaQueries，但就图像质量的审查而言，我不认为这有什么帮助。你需要将像素提高两倍，否则你将无法直观地看到哪些内容是Retina-ready的，哪些不是。我进行了一个快速测试，Chrome只是让google.com网站看起来很小，但是在Firefox上，我发现当时的Google涂鸦并不是Retina像素密度。但是，如果这对人们有用，那就意味着可以跳过Firefox配置中的疯狂大UI！ - andrewb
是的，这里的重点不是提高图像质量（因为物理屏幕仍保持相同的像素密度是不可能的），而是作为没有Retina Mac的开发人员，确保您仍然覆盖所有基础。 - Urb Gim Tam
如果您只想查看图像质量，那么您只需要将浏览器放大200%即可。如果您想在Chrome中运行媒体查询，则应该同时进行缩放和模拟。 - Michael McGinnis
是的 @andrewb，看起来需要分开测试。当我缩放然后模拟时，图像再次变小。在模拟时缩放不会影响图像大小。 - Michael McGinnis
@MichaelMcGinnis 嗯，我想这意味着测试影响图像分辨率的媒体查询有点困难。 - andrewb
显示剩余2条评论
14

在Chrome中，您可以这样做：

1）打开Chrome开发人员工具并单击小“齿轮”图标。
点击小齿轮

2）然后选择“在控制台抽屉中显示‘仿真’视图”。
选择仿真视图

3）最后，在开发人员工具中打开“控制台抽屉”，并选择仿真。设置仿真屏幕并将设备像素比设置为2.5。
设置仿真屏幕和设备像素比

谢谢。它在当前的Chrome中有些相似。 2.5是所有视网膜显示器的单个魔术数字吗？还是自2014年以来增加/减少了？编辑：啊，它在这里。 - crusy
10
据我所知，除了购买视网膜设备外，无其他可行方案。 一些解决方法

不太相关

谢谢，来自developer.apple.com的要点让我找到了正确的方向。在Stack Overflow上这个答案也帮了我很多。 - Alex Kendrick
7

使用Google Chrome模拟Retina（HiDPI）显示的当前方法

1) 在网页上"右键单击"，然后选择"检查"以打开Chrome的开发人员工具

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

单击切换设备模式图标

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

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

4) 现在您可以查看网站在Retina（HiDPI）屏幕上的显示效果

2

Google Chrome 80 版本

  1. 打开开发者工具，快捷键为 ctrl-shift j
  2. 点击左上角的平板电脑/手机图标（如果点击后变蓝色则表示已启用）以切换设备模式。

图片描述

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

图片描述

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

图片描述

  1. 测试时，请确保每次更改像素比后都点击刷新按钮。如果将比例设置为2x，然后将其设置回较低的比例，则不会看到任何更改，因为浏览器将不会获取1x资源，如果已经获取了2x或更高版本的资源。
1
我使用一种图像调整库来动态创建图像。对于2x版本，我在调试期间添加了一个动态水印——这使得很容易看到高分辨率图像是否正在显示。发现这非常有帮助。
由于工作方式不同，因此不包括示例代码。
-1

我不知道这是否太简单了，我按下ctrl并滚动，它会触发媒体查询。 我已经在bugzilla中检查过了，它可以正常工作。 关于svg缩放，我不确定它为什么会模糊，但这是svg图像本身的问题。

你使用的是哪个浏览器或硬件？你是指 Mozilla 而不是 Bugzilla 吗？ - Michael McGinnis
-3
如果你有一台Mac电脑（或者Mac OS X虚拟机），你可以使用Xcode中的iOS模拟器。它会将窗口放大两倍，所以它并不是真实情况下的显示效果，但是它可以清晰地展示你的图片是否模糊。
是的，你可以在Windows中运行OS X作为虚拟机。 - filtah
@filtah 真的不是最糟糕的建议。 - Paul
除了苹果公司的许可仅允许在苹果品牌硬件上使用虚拟机。 - Michael McGinnis
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接