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

Html 如何模拟更高分辨率的屏幕?,html,css,resolution,Html,Css,Resolution,浏览器有没有办法以高于屏幕的分辨率测试我的网站 例如:我有一个1440 x 900的屏幕,我想用1920 x 1200、1920 x 1080等来测试网站。一个解决方案,也许是过度使用:设置所需的分辨率和颜色深度,在浏览器中加载页面并拍摄屏幕截图。虽然这不会告诉你测试的确切分辨率,您可以使用Chrome或FF中的zoom工具进行缩小。这将相当准确地了解网站在高分辨率屏幕上的外观。您可能想试试,它可以以任意分辨率拍摄屏幕截图 此外,在KDE4中,可以将窗口放大到屏幕大小之外。我想我也在Window

浏览器有没有办法以高于屏幕的分辨率测试我的网站


例如:我有一个1440 x 900的屏幕,我想用1920 x 1200、1920 x 1080等来测试网站。

一个解决方案,也许是过度使用:设置所需的分辨率和颜色深度,在浏览器中加载页面并拍摄屏幕截图。

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

您可能想试试,它可以以任意分辨率拍摄屏幕截图

此外,在KDE4中,可以将窗口放大到屏幕大小之外。我想我也在Windows7中看到过。不确定是否有其他操作系统。

请尝试或。这不是所有可能的解决方案,但至少是最常见的解决方案


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

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

一些想法:

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


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

如果您可以只看到站点的静态屏幕截图,我建议您

它们为您提供了在几乎任何浏览器/操作系统组合中查看站点屏幕截图的选项,包括指定屏幕大小的功能,以及一系列其他选项


非常值得收藏。

此解决方案比上述方案快得多:


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

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

如果我错了,您可以纠正我,只需创建一个带有
style=“desired width&height”
src=“your/test.site”
的iframe,作为
的唯一子级。它应该显示站点,就好像分辨率是指定的宽度/高度一样,并在滚动条中进行检查


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

@deceze实际上这是一个非常好的建议。像960.gs这样的东西之所以出现,是因为如果你使用像素大小,你的设计在任何地方看起来都是一样的,只需要占用空间根据屏幕分辨率的不同,屏幕的大小也不同。不需要在高分辨率下测试水平重复的图形,只要你能看到完整的2和一点重复,以确保接缝对齐。或者你可以使用蝉原理来制作更有趣的东西。@Endophage:我不同意。构建适当调整流体布局通常会在用户字体大小偏好等方面提供更好的结果。在任何地方看起来都一样并不重要,这只是像素窥视。@你知道,我还没有看到改变字体大小的流体布局。请注意,固定像素宽度很好的原因是因为人眼难以在一定范围内扫描线条长度(我相信已经发现大约有20个单词,字体大小约为12px,您可以自己查找)。如果你说的是降低手机分辨率,那就不一样了。但是如果你说的是台式机/笔记本电脑的分辨率,如果我有一个高分辨率的大屏幕并调整窗口大小,那么我实际上是在测试不同的分辨率。@Endophage:因此需要使用
40em
(或类似的测量),而不是像您的宽度那样
960px
。当我决定您的12px字体大小对我来说太小并按
Cmd
-
+
时,像素不会缩放。此外,我的浏览器窗口几乎没有960px的大小。@实际上,当您按
Ctrl/Cmd+
时,像素会缩放,因为这是一个缩放功能。您可以在这里尝试一下。main内容部分的宽度为960px。使用40em之类的东西无法随屏幕分辨率进行缩放。使用
em
大小与父元素的字体大小相关,除非被覆盖,否则父元素的字体大小在顶层一直继承到1em/16px(抱歉,在我之前的评论中应该是12pt而不是px)。读取:屏幕分辨率引发此问题:“您的屏幕分辨率太小。您选择的弹出窗口对于您使用的屏幕分辨率来说太大。您的屏幕分辨率为1440像素x 900像素。您尝试打开的弹出窗口为1920像素x 1200。”类似于我们的视图引发此问题:“禁止您没有访问此服务器的权限。此外,尝试使用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。”"这是一个不错的答案。然而,该网站提供了任何你自己都做不到的东西,只要简单地调整任何台式计算机上的浏览器窗口大小。嗯,平板电脑和手机页面上的链接完全没有价值……因为在一个小小的iPod屏幕上,我的1000像素宽的网站会被Mobile Safari自动调整到di八字形非常好