如何在没有实际Retina显示的情况下在Windows上testingRetina的网站?
有没有一种方法来模拟在Windows上的视网膜显示器来testing网站HiVidei显示,如视网膜?
我在一台标准的24英寸1920×1080显示器上运行Windows,昨晚我检查了我的网站上的一个朋友全新的15“Retina MacBook Pro和graphics看起来都模糊(远远比一般的15英寸的MacBook),而字体是超级清脆锐利,使得标识由于直接比较而显得更加糟糕。
我已经按照这个教程来使我的网站准备好了:
我使用了retina.js方法,因为我没有任何背景图片。
有没有什么方法可以testing这个实际工作? 显然,我可以问我的朋友使用他的视网膜笔记本电脑,但这不是一个可行的工作stream程。 我希望能够在我自己的环境中至less粗略地testingRetina兼容性的网站。
关于:configuration黑客在Firefox
你实际上可以使用Firefox:
- 转到“about:config”
- find“layout.css.devPixelsPerPx
- 改变它到你想要的比例(1为正常,2为视网膜,等-1似乎是默认。)
截图:
刷新你的页面 – 繁荣,你的媒体查询已经踢了! 帽子火狐浏览器是为web开发真棒! 站起来,不仅网站现在会增加两倍的大小,Firefox的用户界面也将翻倍。 这种加倍或缩放是必要的,因为这是您能够检查标准像素比率屏幕上所有像素的唯一方法。
这适用于使用Firefox 21.0的Windows 7以及使用Firefox 27.0.1的Mac OS X。
如果您不使用媒体查询和其他更高级的逻辑(例如,您向每个人提供HiDPI图像),则可以将浏览器放大到200%。 Chrome模拟器是一个有用的工具,它可以在媒体查询中使用,但是由于它阻止了缩放,因此无法检查图像质量。
放大Firefox和Edge
目前在Firefox和Edge上,如果放大,会触发基于dppx的媒体查询。 所以这个更简单的方法可能已经足够了,但是请注意,这个function被报告为Firefox的一个“无法修复”的bug ,所以这可能会改变。
在Google Chrome版本“33.0.1720.0 Canary”中,您现在可以使用“Device pixel ratio”,“android font metrics”和“Viewport emulation”等大量参数来模拟iPhone5等设备 。
不需要这个Firefox破解 – 无论如何,很难与之合作。
感谢Google开发团队! !:)
在铬你可以做到这一点:
1)打开Chrome开发者工具,点击小“齿轮”图标。
2)然后select“在控制台抽屉中显示”仿真“视图。
3)最后,在Developer Tools中打开“控制台抽屉”,然后selectEmulation 。 设置模拟屏幕并将设备像素比率设置为2.5。
据我所知,这是不可能的,除了购买视网膜设备。
一些变通办法
-
build议在这里:
-
如果您将图片尺寸加倍并且比例仍然相同,那么您就非常安全。 如果您没有要testing的视网膜显示器,请从像素比率媒体查询切换到基于宽度的某个位置。
-
testing和解决高分辨率内容问题
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/
不太相关
-
如何创build一个响应式,视网膜准备的网站
-
如何devise苹果视网膜显示器
http://www.studiopress.com/design/retina-display-design.htm -
build立视网膜显示器的网站:用像素交朋友
http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels -
如何开发视网膜显示网站?
-
如何获得视网膜准备好?
使用谷歌浏览器模拟视网膜(HiDPI)显示的当前方法
1)在网页上点击 “ 右键 ”,然后select“ 检查 ”打开Chrome的开发者工具
2)点击“ 切换设备模式 ”图标
3)在屏幕顶部的设备下拉框中,select“ 带HiDPI屏幕的笔记本电脑 ”
4)现在您可以查看网站在Retina(即HiDPI)屏幕上的显示效果
我不知道这是否太简单,我按Ctrl和滚动,它触发媒体查询。 我已经检查了它在bugzilla,它的工作原理。 我不确定svg缩放,因为它看起来模糊,但它是svg图像。
如果你有一个mac(或者mac osx虚拟机),你可以使用ios模拟器和xcode。 它确实炸毁了窗户的两倍,所以它不是现实生活中的现实,而是会清楚地显示你的图像是否模糊。