jQuery调整窗口大小以适应内容

Question

我有一个简单的弹出窗口，显示300x300像素的图片，我设置窗口大小为350x350像素，但是根据不同的浏览器，我要么得到滚动条，要么多余的空白区域。是否有一些jQuery函数可以调整浏览器窗口大小以适应内容，无论什么浏览器都不会出现滚动条或空白区域？

帮帮我！

- Caballero

Answer 1

您可以像这样做...

function windowResize() {
   var contentWidth = document.getElementById("YourImageOrContent").offsetWidth;
   var contentHeight = document.getElementById("YourImageOrContent").offsetHeight;
   window.resizeTo(contentWidth,contentHeight);
}

您可能需要将值增加20像素左右... 但我仍然坚持我的原始答案 :-D

- Fasani

---

我尝试过类似的方法，但由于某种原因，它仍会使弹出窗口在每个浏览器中以不同的方式调整大小。 - Caballero

是的，可能是由于CSS的原因，这也是我的最初回复。尝试在上面执行* {}操作，这样您应该可以在所有浏览器上拥有0填充、边距、边框和轮廓的所有元素，从而使您可以在所有浏览器上拥有类似大小的窗口。（不是100％确定） - Fasani

document.getElementById("#YourImageOrContent") 是不正确的。请移除井号。 - Kalle H. Väravas

Answer 2

这个问题的一部分在于"resizeTo"是基于窗口的外部边界进行调整大小。这真的没有帮助，因为不同浏览器之间地址栏的大小将会有所不同，并且一些浏览器将遵守"location=no"指令，而另一些则不会。对我有效的解决方案（其中包括一些jQuery，抱歉，但您可以反向实现它）是这样的：

window.resizeTo(422, $('#my-id').height() + (window.outerHeight - window.innerHeight));

我已在Safari、Firefox和Chrome上进行了测试，似乎对所有这些浏览器都有效（由于没有Windows安装，无法评论IE）。

- Nathan Crause

Answer 3

很可能是CSS的margin / padding影响了文档。

执行：

* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
}

那是一个非常糟糕的CSS重置，如果您想要更优雅的解决方案，网络上有大量关于CSS重置的内容 :-)

但这将希望为您提供对问题的洞察..

- Fasani

---

这与CSS无关，我需要一个函数来调整浏览器窗口大小以适应内容。 - Caballero

你可能会发现，不同浏览器中出现滚动条或白色空间的原因是由于CSS和怪异模式引起的。 - Fasani

主要原因是不同浏览器边框大小不同。例如，Firefox有一个较宽的窗口边框，而Opera几乎没有。如果图像的大小为300x300，则window.resizeTo(args)将使整个窗口的大小为300x300，包括边框、按钮等所有内容。 - Caballero

如果您尝试了CSS方法仍然存在问题，那么您将不得不进行浏览器嗅探，并在不同的浏览器中添加一些像素 :-( - Fasani

Answer 4

如果你要弹出一个浏览器窗口（这是我理解的），那么在你的打开函数中，你应该像这样做：

<SCRIPT LANGUAGE="javascript">
<!--
window.open ('image.jpg', 'newwindow', 'height=350,width=350, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, directories=no, status=no');
-->
</SCRIPT>

请注意 scrollbars=no

- Rafael Herscovici