Question

您能告诉我如何使用屏幕分辨率自动修复HTML布局吗？例如，我在1024 x 768像素的屏幕分辨率下编码HTML。如果我切换到800 x 600像素，我希望我的HTML窗口自动更改以修复屏幕。

我怎么能这样做？

Answer 1

通过 HTML窗口，我假设你在谈论HTML内容而不是浏览器窗口。

如果是这种情况，您要执行的操作的关键字为liquid/fluid/elastic design。

您可能需要阅读Elastic Design by Patrick Griffiths网站上的A List Apart或search google for liquid design。

Answer 2

您不必使用javascript。只需在CSS文件中将元素的宽度（div，表等）设置为100％即可。然后它将相应地调整视口的宽度。（同样适用于高度）

<!-- in yourHtml.html file -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <link rel="stylesheet" type="text/css" href="yourStyleSheet.css" />
  </head>

  <body>
    <div class="fullWidth">
      Your content
    </div>
  </body>

</html>

<!-- in yourStyleSheet.css file -->
div.fullWidth {
    width:100%; 
    height:100%; 
    background-color:#CCC;
}

Answer 3

如果你的意思是实际的浏览器窗口，Javascript有screen.width和screen.height返回当前的分辨率;见examples of use。在特定网页上，您可以将脚本设置为在计时器上运行以检查这些值是否已更改，如果有，则调整窗口大小。这似乎是一个奇特的成就 - 屏幕分辨率很少变化，你必须在包含这个JS脚本的特定页面上才能工作。另请注意，宽度和高度属性不会记录工具栏所在的位置，因此窗口可能会消失在那里。这也是不好的行为，因为自动最大化会覆盖用户可能更喜欢的内容。

Answer 4

你的问题很模糊，所以我尝试帮助解决一些可能与你的问题有关的例子。

如果你需要使用JavaScript获取浏览器窗口的大小，这里有一个例子：

function getClientSize() {
  var width = 0, height = 0;

  if(typeof(window.innerWidth) == 'number') {
        width = window.innerWidth;
        height = window.innerHeight;
  } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
  } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        width = document.body.clientWidth;
        height = document.body.clientHeight;
  }

  return {width: width, height: height};
}

要以编程方式检测浏览器窗口的大小调整，请将监听器附加到window.onresize事件。请注意，以下简化示例并不关心是否已附加侦听器（请改为使用addEventListener / attachEvent）：

window.onresize = function() {
    var size = getClientSize();
    alert("Width: " + size.width + ", Height: " + size.height);
}

将HTML布局缩放到屏幕大小

4 个答案: