Html 如何模拟更高分辨率的屏幕?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6400207/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:10:53  来源:igfitidea点击:

How to simulate a higher resolution screen?

htmlcssresolution

提问by HappyDeveloper

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.

例如:我有一个 1440 x 900 的屏幕,我想在 1920 x 1200、1920 x 1080 等分辨率下测试网站。

回答by Cody Crumrine

[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.]

[编辑:首先检查浏览器的开发工具!正如@SkylarIttner 在评论中指出的那样,自从以下解决方案发布以来,响应式设计测试工具已经在大多数浏览器中推出。它们现在可能是最好/最简单的选择。]

You could, correct me if I'm wrong, simply create an iframe with style="desired width & height"and src="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.

如果我错了,您可以纠正我,只需创建一个 iframe,style="desired width & height"并将 和src="your/test.site"作为<body>. 应该像分辨率是指定的宽度/高度一样显示站点,并导致滚动条进行检查。

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.

不如使用第三方方便,必须自己设置,但具有能够在没有互联网连接的情况下进行本地测试的优势。

回答by Kyle

This solution is way faster than the ones proposed above:

这个解决方案比上面提出的解决方案快得多:

http://www.infobyip.com/testwebsiteresolution.php

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).

它不像 browsershots.org 那样通用,但速度要快得多(几秒钟 vs. 45 分钟的队列)。

回答by StrangeWill

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.

使用浏览器缩放,1024x768 50% 缩放 = 2048x1536 模拟分辨率,我知道 Chrome 调整图像大小等。事情变得难以阅读,但我假设您正在测试放置等。

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).

您也可以使用一些屏幕截图程序来获取比正常分辨率更高的屏幕截图(Firefox 上的 fireshot 允许我这样做,但在分辨率非常高时存在内存问题,并且不再免费)。

回答by Eugen Constantin Dinca

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).

一种可能是矫枉过正的解决方案是使用Xvfb:设置所需的分辨率和颜色深度,在浏览器中加载您的页面并截取屏幕截图。

回答by Eddie Cheng

Try viewlike.usor screen-resolution.com. It's not all possible resolutions but the most common ones at least.

试试viewlike.usscreen-resolution.com。这不是所有可能的解决方案,但至少是最常见的解决方案。

I have not tried them but it seems pretty straight forward.

我还没有尝试过,但看起来很简单。

回答by Spudley

If you are okay with just seeing a static screenshot of your site, I'd recommend http://browsershots.org/

如果您只看网站的静态屏幕截图就可以了,我建议您访问http://browsershots.org/

They give you the option to see screen shots of your site in virtually any browser / OS combination, including the ability to specify screen size, plus a whole bunch of other options.

它们使您可以选择在几乎任何浏览器/操作系统组合中查看站点的屏幕截图,包括指定屏幕大小的能力,以及一大堆其他选项。

Well worth bookmarking.

非常值得收藏。

回答by Jason Gennaro

Although this won't tell you the exact resolution your testing, you can use the zoomtool in Chrome or FF to zoom out. This will give a fairly accurate idea of what the site looks like on higher res screens.

虽然这不会告诉您测试的确切分辨率,但您可以使用zoomChrome 或 FF 中的工具进行缩小。这将相当准确地了解网站在高分辨率屏幕上的外观。

回答by user123444555621

You may want to try wkhtmltoimage, which can take screenshots at arbitrary resolutions.

您可能想尝试wkhtmltoimage,它可以以任意分辨率截取屏幕截图。

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.

此外,在 KDE4 中,可以将窗口放大到超出屏幕尺寸。我想我也在 Windows 7 中看到过它。不确定其他操作系统。

回答by Jaco Briers

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. Thisarticle seems to indicate that Snagit can do this. Then just take a look at the captured pic.

IE9 允许您将浏览器窗口调整为任意大小:按 F12 获取开发人员工具,转到工具 | 调整大小并选择您喜欢的大小。如果窗口大于屏幕,则使用一些可以捕获屏幕外窗口的工具。 这篇文章似乎表明 Snagit 可以做到这一点。然后只需看看捕获的照片。