如何模拟更高分辨率的屏幕？[关闭]

93

浏览器有什么方法可以以比屏幕高的分辨率测试我的网站？

例如：我的屏幕为1440 x 900，我想以1920 x 1200、1920 x 1080等测试网站。

html css resolution

— 快乐开发者
source

@deceze实际上是一个很好的建议。出现960.gs之类的问题的全部要点是，如果使用像素大小，则您的设计在任何地方都看起来一样，只是根据屏幕的分辨率占用不同数量的屏幕空间。只要可以看到完整的2个重复点并确保所有接缝对齐，就无需以高分辨率测试水平重复的图形。或者，您可以只使用蝉原理来产生更有趣的东西。

— Endophage 2011年

1

@Endophage：我不同意。就用户字体大小首选项而言，正确构建流畅的布局通常会带来更好的结果。到处看起来相同并不是必须的，只是窥视像素。

— 你

@You我还没有看到改变字体大小的流畅布局。注意固定像素宽度好是因为人眼难以扫描一定长度的线条（我相信已经发现大约20个单词，字体大小约为12px，您可以自己查找）。如果您谈论的是降低电话分辨率，这是另一回事，但是如果您谈论的是台式机/笔记本电脑分辨率，那么如果我只有一个高分辨率的大屏幕并调整窗口大小，那么我正在测试不同的分辨率。

— Endophage 2011年

1

@Endophage：因此需要使用40em（或类似的度量）而不是960px宽度。当我确定您的12px字体大小对我来说太小并按Cmd- 时，像素将无法缩放+。此外，我的浏览器窗口几乎只有960px。

— 你

@您实际上，当您点击时像素会缩放，Ctrl/Cmd +因为它是缩放功能。您可以在此处尝试使用。主要内容部分的宽度为960px。使用40em之类的东西将不会随着屏幕分辨率而缩放。使用em大小是相对于父元素的字体大小的，父元素的字体大小在顶层一直继承到1em / 16px，除非被覆盖（抱歉，在我先前的评论中应该为12pt而不是px）。阅读：kyleschaeffer.com/best-practices/…– Endophage 2011

— 6

76

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

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

它不像使用第三方那样方便，需要您自己进行设置，但是具有能够在没有互联网连接的情况下进行本地测试的优点。

— 科迪·克鲁姆林
source

5

为什么...我必须说，那是天才。+1

— 黑手党

当然！谢谢！^^

— Oskar Duveborn

我感激不尽！

— 拉曼·谢里夫

1

感谢所有积极的反馈。很高兴知道什么时候有帮助。

— Cody Crumrine 2015年

1

为了对所有人有帮助，下面是执行@Cody Crumrine建议的示例代码，它是Genius！<iframe src =“测试网站的网站 ” width =“ 1024” height =“ 768”> </ iframe>

— Stuart

28

该解决方案比上面提出的解决方案要快得多：

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

它不像browsershots.org那样通用，但速度更快（几秒钟对45分钟的队列）。

— 凯尔
source

这不是一个坏答案。但是，该站点仅通过调整任何台式计算机上的浏览器窗口大小就可以提供您无法做的任何事情。恕我直言，平板电脑和手机上该页面上的链接是完全没有价值的……因为在iPod屏幕上，我的1000像素宽的网站会由Mobile Safari 自动调整大小，以完美显示。

— 闪亮

4

@ Sparky672，我个人无法将浏览器的大小调整为大于屏幕分辨率。OP要求在1440上看到1920。也许有办法，但是它像infobyip的解决方案一样容易吗？抱歉，如果我忽略了明显的内容（可能会）。

— 凯尔

2

谢谢@ Sparky672，没有问题。但是，您是否不应该删除注释“该站点绝对不能提供您仅通过调整任何台式计算机上的浏览器窗口大小就无法完成的工作”，因为那是不正确的？

— 凯尔

1

@ Sparky672，垂直呢？

— 凯尔

1

我使用垂直查看折叠上方和下方的内容。我将其与StatsCounter和MouseFlow结合使用，以查看有多少百分比的观众看到了什么。我爱你闪亮！我认为您读错了我的语气。我想提供帮助。没有人会调查我提供的0票和评论列表。但是，好吧……

— 凯尔

9

一些想法：

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

另外，您可以使用某些屏幕截图程序来获取比正常分辨率更高的屏幕截图（Firefox上的fireshot允许我执行此操作，但是分辨率确实很高，存在内存问题，并且不再可用）。

— 奇异意志
source

6

一种解决方案（也许是过大的解决方案）是使用Xvfb：设置所需的分辨率和颜色深度，在浏览器中加载页面并获取屏幕截图。

— 尤金·康斯坦丁·丁卡
source

4

尝试使用viewlike.us或screen-resolution.com。并非所有可能的解决方案，至少是最常见的解决方案。

我没有尝试过，但是看起来很简单。

— 郑伊迪
source

屏幕分辨率将引发以下问题：“您的屏幕分辨率太小，所选弹出窗口对于您使用的屏幕分辨率而言太大。您的屏幕分辨率为1440 x 900像素。您尝试打开的弹出窗口为1920像素乘以1200。”

— HappyDeveloper 2011年

像我们这样的视图将抛出以下错误：“禁止您没有访问此服务器上的/的权限。此外，尝试使用ErrorDocument来处理请求时遇到了404 Not Found错误。Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635服务器位于viewlike.us端口80“

— HappyDeveloper 2011年

2

尽管这不能告诉您测试的确切分辨率，但是您可以使用zoomChrome或FF中的工具进行缩小。这将使您对高分辨率屏幕上的网站外观有一个相当准确的了解。

— 杰森·根纳罗（Jason Gennaro）
source

2

如果您可以只看到您网站的静态屏幕快照，可以建议 http://browsershots.org/

他们为您提供了几乎可以在任何浏览器/ OS组合中查看站点屏幕快照的选项，包括指定屏幕大小的功能，以及大量其他选项。

非常值得收藏。

— 斯普德利
source

1

您可能想尝试wkhtmltoimage，它可以以任意分辨率拍摄屏幕截图。

同样，在KDE4中，可以将窗口扩大到超出屏幕大小。我想我也曾在Windows 7中看到过它。不确定其他操作系统。

— 用户123444555621
source

1

IE9允许您将浏览器窗口调整为任意大小：按F12获取开发人员工具，请转到“工具” |“工具”。调整大小并选择您喜欢的尺寸。然后使用一些可以捕获离屏窗口的工具（如果窗口大于屏幕）。此文章似乎表明，SnagIt的可以做到这一点。然后，只需看看捕获的图片即可。

— 哈科·布里尔斯（Jaco Briers）
source