如何模拟更高分辨率的屏幕?
有没有办法让浏览器以高于我的屏幕的分辨率来测试我的网站?
例如:我有一个 1440 x 900 的屏幕,我想在 1920 x 1200、1920 x 1080 等分辨率下测试网站。
Is there any way for the browser to test my websites in resolutions that are higher than my screens?
E.g: I have a 1440 x 900 screen, and I want to test the website in 1920 x 1200, 1920 x 1080, etc.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
[编辑:首先检查浏览器的开发工具!正如 @SkylarIttner 在评论中指出的那样,自发布以下解决方案以来,大多数浏览器中都推出了用于响应式设计测试的工具。它们可能是现在最好/最简单的选择。]
如果我错了,请纠正我,只需使用
style="desired width & height"
和src=" 创建一个 iframe your/test.site"
作为的唯一子元素。应将站点显示为分辨率为指定的宽度/高度,并导致滚动条来检查它。
不像使用第三方那么方便,必须自己设置,但优点是可以在没有互联网连接的情况下进行本地测试。
[Edit: Check your browser's devtools first! As @SkylarIttner points out in the comments, tools for responsive design testing have been rolled out since in most browsers since the below solution was posted. They are likely the best/easiest option now.]
You could, correct me if I'm wrong, simply create an iframe with
style="desired width & height"
andsrc="your/test.site"
as the only child of<body>
. Should display the site as if the resolution was the specified width/height and result in scroll bars to examine it.Not as convenient as using a third party, having to set it up yourself, but has the advantage of being able to test locally with no internet connection.
该解决方案比上面提出的解决方案要快得多:
http://www.infobyip.com/testwebsiteresolution.php< /a>
它不像 browsershots.org 那样通用,但速度要快得多(几秒钟 vs. 45 分钟的队列)。
This solution is way faster than the ones proposed above:
http://www.infobyip.com/testwebsiteresolution.php
It's not as versatile as browsershots.org but it's much faster (a few seconds v. a 45 minute queue).
一些想法:
使用浏览器缩放,1024x768 50%缩放=2048x1536模拟分辨率,我知道Chrome调整图像大小等。事情变得难以阅读,但我假设您正在测试放置等。
您还可以使用一些屏幕截图程序来获取高于正常分辨率的屏幕截图(Firefox 上的 fireshot 让我可以做到这一点,但在非常高分辨率的情况下存在内存问题,并且不再免费)。
Some ideas:
Use browser zoom, 1024x768 50% zoom = 2048x1536 simulated resolution, I know Chrome resizes images and the like. Things become hard to read, but I'm assuming you're testing placement and such.
Also you can use some screenshot programs to take higher than normal resolution screenshots (fireshot on Firefox let me do this, but had memory issues with really high resolutions, and isn't free anymore).
一种解决方案(可能有点过分)是使用 Xvfb:设置所需的分辨率和颜色深度,加载您在浏览器中的页面并截取屏幕截图。
One solution, perhaps overkill, would be to use Xvfb: set the desired resolution and color depth, load your page in browser(s) and take screenshot(s).
虽然这不会告诉您测试的确切分辨率,但您可以使用 Chrome 或 FF 中的
zoom
工具进行缩小。这将相当准确地了解网站在高分辨率屏幕上的外观。Although this won't tell you the exact resolution your testing, you can use the
zoom
tool in Chrome or FF to zoom out. This will give a fairly accurate idea of what the site looks like on higher res screens.您可能想尝试 wkhtmltoimage,它可以以任意分辨率截取屏幕截图。
此外,在 KDE4 中可以将窗口放大到超出屏幕尺寸。我想我在 Windows 7 中也见过它。不确定其他操作系统。
You may want to try wkhtmltoimage, which can take screenshots at arbitrary resolutions.
Also, in KDE4 it is possible to enlarge a window beyond the screen size. I think I have seen it in Windows 7 too. Not sure about other OSes.
IE9 允许您将浏览器窗口调整为任意大小:按 F12 打开开发人员工具,转到工具 |调整大小并选择您喜欢的尺寸。然后,如果窗口比屏幕大,则使用一些可以捕获屏幕外窗口的工具。 这篇文章似乎表明Snagit 可以做到这一点。然后看看捕获的图片。
IE9 allows you to resize the browser window to an arbitrary size: Press F12 for developer tools, go to Tools | Resize and pick your preferred size. Then use some tool that can capture off-screen windows if the window is bigger than your screen. This article seems to indicate that Snagit can do this. Then just take a look at the captured pic.