Html 如何在没有实际 Retina 显示器的情况下在 Windows 上测试 Retina 网站？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15551287/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to test a website for Retina on Windows without an actual Retina display?
提问by Alexander Rechsteiner
Is there a way to simulate a Retina display on Windows to test a website for HiDPI displays such as Retina?
有没有办法在 Windows 上模拟 Retina 显示器来测试网站的 HiDPI 显示器（例如 Retina）？
I run Windows on a standard 24" 1920x1080 monitor. Last night I checked out my website on a friends brand new 15" Retina MacBook Pro and the graphics looked all blurry (far worse than on a regular 15 inch MacBook), while the font was super crisp and sharp, making the logo appear even worse because of the direct comparison.
我在标准的 24" 1920x1080 显示器上运行 Windows。昨晚我在朋友全新的 15" Retina MacBook Pro 上查看了我的网站，图形看起来都很模糊（比普通的 15 英寸 MacBook 差得多），而字体是超级清晰锐利，直接对比让logo显得更差。
I have followed this tutorial to make my website Retina ready:
我已经按照本教程准备好我的网站 Retina：
http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs
http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs
I used the retina.js approach since I don't have any background images.
我使用了retina.js 方法，因为我没有任何背景图像。
Is there any way for me to test if this actually works? Obviously I could ask my friend to use his Retina Notebook but that is not a feasible workflow for me. I want to be able to at least roughly test websites for Retina compatibility it in my own environment.
有什么办法可以让我测试这是否真的有效？显然我可以让我的朋友使用他的 Retina Notebook，但这对我来说不是一个可行的工作流程。我希望至少能够在我自己的环境中粗略地测试网站的 Retina 兼容性。
回答by andrewb
about:config hack on Firefox
about:config hack on Firefox
You actually can using Firefox:
您实际上可以使用 Firefox：
- Go to "about:config"
- Find "layout.css.devPixelsPerPx
- Change it to your desired ratio (1 for normal, 2 for retina, etc. -1 seems to be Default.)
- 转到“关于：配置”
- 找到“layout.css.devPixelsPerPx
- 将其更改为您想要的比例（正常为 1，视网膜为 2，等等。-1 似乎是默认值。）
Screenshot:
截屏：
Refresh your page - boom, your media query has now kicked in! Hats off to Firefox for being awesome for web developing! Heads up, not only will the website now be boosted to twice the size, the Firefox UI will also be doubled. This doubling or zooming is necessary, as that's the only way you'll be able to examine all the pixels on a standard pixel ratio screen.
刷新您的页面 - 繁荣，您的媒体查询现已开始！向 Firefox 致敬，因为它非常适合 Web 开发！注意，现在不仅网站大小会增加一倍，Firefox UI 也将增加一倍。这种加倍或缩放是必要的，因为这是您能够检查标准像素比屏幕上所有像素的唯一方法。
This works fine on Windows 7 with Firefox 21.0, and also on Mac OS X with Firefox 27.0.1.
这适用于带有 Firefox 21.0 的 Windows 7，以及带有 Firefox 27.0.1 的 Mac OS X。
If you're not using media queries and other more advanced logic (i.e. you're feeding everyone the HiDPI images), you can just zoom in with your browser to 200%. The Chrome emulation is a helpful tool as well as it kicks in media queries, but because it prevents zooming, you can't examine image quality.
如果您不使用媒体查询和其他更高级的逻辑（即您向所有人提供 HiDPI 图像），您可以使用浏览器将其放大到 200%。Chrome 仿真是一个有用的工具，它可以启动媒体查询，但由于它会阻止缩放，因此您无法检查图像质量。
Zooming on Firefox & Edge
在 Firefox 和 Edge 上缩放
Currently on Firefox and Edge, if you zoom it triggers dppx-based media queries. So this easier approach may be sufficient, but be aware that the functionality is reported as a "won't fix" bugfor Firefox, so this could change.
目前在 Firefox 和 Edge 上，如果缩放它会触发基于 dppx 的媒体查询。因此，这种更简单的方法可能就足够了，但请注意，该功能被报告为 Firefox的“无法修复”错误，因此这可能会改变。
回答by Urb Gim Tam
In Google Chrome version "33.0.1720.0 Canary", you can now emulate devices like iPhone5 and others with a great set of parameters like "Device pixel ratio", "android font metrics" and "Viewport emulation".
在 Google Chrome 版本“33.0.1720.0 Canary”中，您现在可以使用一组很棒的参数（例如“设备像素比”、“android 字体指标”和“视口模拟”）来模拟 iPhone5 等设备。
There's no need for that Firefox hack anymore - hard to work with, anyway.
不再需要那个 Firefox hack - 无论如何都很难使用。
Thanks Google dev team! !:)
感谢谷歌开发团队！！:)
回答by thegreyspot
In chrome you can do it by:
在 chrome 中，您可以通过以下方式实现：
1) Open up Chrome Developer Tools and click on the little "gear" icon.
1) 打开 Chrome 开发者工具并点击小“齿轮”图标。
2) Then choose "Show 'Emulation' view in console drawer."
2) 然后选择“在控制台抽屉中显示‘仿真’视图”。
3) Finally, open up the "console drawer" in Developer Tools, and choose Emulation. Set Emulate screenand set the Device Pixel Ratioto 2.5.
3) 最后，在开发者工具中打开“控制台抽屉”，选择Emulation。设置仿真屏幕并将设备像素比设置为 2.5。
回答by JSuar
As far as I can tell, it's not possible other than buying a retina device.
据我所知，除了购买视网膜设备之外，这是不可能的。
Some Workarounds
一些解决方法
If you doubled up the image sizes and proportions are still the same, you're pretty much safe. If you don't have a retina display to test with, switch from the pixel-ratio media query to something width-based.
Testing and Troubleshooting High-Resolution Content
http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html
How to Develop for HiDPI (“Retina”) without a Retina MacBook Pro
http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/WordPress Retina Images
http://wpmu.org/wordpress-retina/
如果您将图像尺寸和比例增加一倍，并且比例仍然相同，那么您就非常安全了。如果您没有要测试的视网膜显示器，请从像素比媒体查询切换到基于宽度的查询。
高分辨率内容的测试和故障排除
http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html
如何在没有 Retina MacBook Pro 的情况下为 HiDPI（“Retina”）开发
http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/WordPress 视网膜图像
http://wpmu.org/wordpress-retina/
Less Relevant
不相关
How to Design for Apple's Retina Displays
http://www.studiopress.com/design/retina-display-design.htmBuilding Websites for Retina Displays: Making Friends with Pixels
http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels
回答by user280109
Current Method for Emulating a Retina (HiDPI) Display with Google Chrome
使用 Google Chrome 模拟 Retina (HiDPI) 显示器的当前方法
1)"Right Click" on the web page then select "Inspect" to Open Chrome's Developer Tools
1）在网页上“右键单击”然后选择“检查”打开Chrome的开发者工具
2)Click the "Toggle Device Mode" Icon
2)点击“切换设备模式”图标
3)On the Device Dropdown box at the top of the screen, select "Laptop with HiDPI Screen"
3)在屏幕顶部的设备下拉框中，选择“带 HiDPI 屏幕的笔记本电脑”
4)You can now view how the website will look on a Retina aka HiDPI screen
4)您现在可以在 Retina aka HiDPI 屏幕上查看网站的外观
回答by Simon_Weaver
I use an image resizing library to dynamically create images. For the 2x version I add a dynamic watermark during debugging - this makes it very easy to see if the high-res image is actually being shown or not. Have found it very helpful.
我使用图像大小调整库来动态创建图像。对于 2x 版本，我在调试期间添加了动态水印 - 这使得很容易查看是否实际显示了高分辨率图像。发现它很有帮助。
The way this works will vary so not including sample code.
它的工作方式会有所不同，因此不包括示例代码。
回答by Isaac Pak
Google Chrome Version 80
谷歌浏览器 80 版
- Open the Developer Tools
ctrl-shift j - Toggle the device toolbar by clicking on the tablet/phone iconat the top left(it will turn blue if you click it)
- 打开开发者工具
ctrl-shift j - 单击左上角的平板电脑/手机图标切换设备工具栏（如果单击它会变成蓝色）
- Now the viewport should have a toolbar above it. Click the options icon(3 dots) at the top right and select the Add device pixel ratiooption.
- 现在视口上面应该有一个工具栏。单击右上角的选项图标（3 个点）并选择添加设备像素比选项。
- You should now see the option on the toolbar. From here you can switch to 1x, 2x, or 3x.
- 您现在应该会看到工具栏上的选项。从这里您可以切换到 1x、2x 或 3x。
- When you are testing make sure that you hit the refresh button each time you change the pixel ratio. If you set the ratio to 2x and then set it back to lower then you won't see any changes because the browser will not fetch 1x assets if it has already fetch 2x or higher.
- 当您进行测试时，请确保每次更改像素比率时都点击刷新按钮。如果您将比率设置为 2x，然后将其设置回较低，那么您将看不到任何更改，因为如果浏览器已经获取 2x 或更高的资源，则不会获取 1x 资源。
回答by Dale Wemyss
I do not know if this is too simple, I press ctrl and scroll and it triggers the media query. I have checked it in bugzilla and it works. I am not sure about the svg scaling as it appears blurry,but it is the svg image.
我不知道这是否太简单了，我按 ctrl 并滚动并触发媒体查询。我已经在 bugzilla 中检查过它并且它有效。我不确定 svg 缩放，因为它看起来很模糊，但它是 svg 图像。
回答by filtah
If you have a mac (or mac osx virtual machine) you can use the ios emulator with xcode. it does blow up the window twice as big, so its not how it appears in real life, but will clearly show you if your images are blurry or not.
如果您有 mac（或 mac osx 虚拟机），您可以将 ios 模拟器与 xcode 一起使用。它确实把窗户炸了两倍大，所以它不是它在现实生活中的样子，但会清楚地告诉你你的图像是否模糊。
