【问题标题】:How to test a website for Retina on Windows without an actual Retina display?如何在没有实际 Retina 显示屏的情况下在 Windows 上测试 Retina 网站?
【发布时间】:2013-03-21 15:11:30
【问题描述】:

有没有办法在 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 兼容性。

【问题讨论】:

  • @Jsuar:不幸的是,事实并非如此。 JavaScript 库似乎不适用于retina.js,而 Opera 似乎适用于移动设备。
  • 尝试在 SVG 中制作所有图像,例如您的徽标,而不是使用 png 或 jpg。

标签: html css retina-display retina.js


【解决方案1】:

关于: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,该功能被报告为“无法修复”bug,因此这可能会改变。

【讨论】:

  • 有人知道,Chrome 有类似的吗?
  • @castus 不要这么认为,你得到的最好的就是放大,我认为这不会影响媒体查询。
  • @andrewb:我想知道同样的事情,因为它提高了我的声誉(耶!)。也许它被谷歌索引为一个频繁的搜索词。
  • @AlexanderRechsteiner 它实际上被 Smashing Magazine 的 Facebook 页面链接,并在 Facebook 上被不少人分享。感谢您接受我的回答!
  • @ChristinaArasmoBeymer 是的,它可以
【解决方案2】:

在 Google Chrome 版本“33.0.1720.0 Canary”中,您现在可以emulate devices like iPhone5 and others with a great set of parameters like "Device pixel ratio", "android font metrics" and "Viewport emulation"

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

感谢 Google 开发团队! !:)

【讨论】:

  • 我没有查看 MediaQueries,但就仅查看图像质量而言,我看不出这有什么帮助。您需要提高像素 X2,否则您将无法直观地看到哪些内容支持 Retina,哪些内容不支持。我做了一个快速测试,Chrome 只是让 google.com 网站看起来很小,但在 Firefox 上,我发现当时的 Google Doodle 不是 Retina 像素密度。但是,嘿,如果这对人们有用,那就意味着使用 Firefox 配置跳过疯狂的大 UI!
  • 是的,这里的重点不是提高图像质量(这是不可能的,因为物理屏幕保持相同的像素密度),但可以肯定的是,作为没有 Retina Mac 的开发人员,你'仍然覆盖所有基地。
  • 如果您只想查看图像质量,您无需执行任何操作,只需将浏览器缩放 200%。如果你想在 Chrome 中运行媒体查询,你应该同时做:缩放和模拟。
  • @MichaelMcGinnis 我无法用 Chrome 模拟和缩放,你能做到吗?
  • 是的@andrewb,看起来它需要单独的测试。当我放大然后模拟时,图像又变小了。模拟时缩放不会影响图像大小。
【解决方案3】:

在 chrome 中,您可以通过以下方式完成:

1) 打开 Chrome 开发者工具并点击小“齿轮”图标。


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


3) 最后,在开发者工具中打开“控制台抽屉”,选择Emulation。设置 Emulate screen 并将 Device Pixel Ratio 设置为 2.5。

【讨论】:

  • 谢谢。它在当前的 Chrome 中有些相似。 2.5all Retina 显示器的唯一幻数吗?还是自 2014 年以来增加/减少?编辑:啊,是here
【解决方案4】:

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

一些解决方法

不相关

【讨论】:

  • 谢谢,developer.apple.com 的要点让我走上了正轨。就像 Stack Overflow 上的 this other answer here 一样。
【解决方案5】:

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

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

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

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

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

【讨论】:

    【解决方案6】:

    谷歌浏览器 80 版

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

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

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

    1. 在测试时,请确保每次更改像素比率时都点击刷新按钮。如果您将比率设置为 2x,然后再将其设置为更低,那么您将看不到任何更改,因为如果浏览器已经获取 2x 或更高的值,浏览器将不会获取 1x 资产。

    【讨论】:

      【解决方案7】:

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

      其工作方式会有所不同,因此不包括示例代码。

      【讨论】:

        【解决方案8】:

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

        【讨论】:

        • 您使用的是什么浏览器或硬件?您是指 Mozilla 而不是 Bugzilla?
        【解决方案9】:

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

        【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-08-27
        • 2015-11-19
        • 1970-01-01
        • 1970-01-01
        • 2016-10-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多