跨浏览器的CSS max-width属性的不一致和意外行为

Question

我正在构建一个工具，通过书签操纵现有网页上的DOM，我遇到了在某些网站上设置最大宽度的问题。

我的目标是调整任何页面的大小，使最大宽度为980px。

然而，给身体最大宽度980px表现不正常。在某些页面上，它可以完美地运行，而在其他页面上，某些元素会根据新的宽度重新定位，而其他元素则不会。

以Google.com为例。在以下每个屏幕截图中，我给出了最大宽度为980px的主体。我还手动添加了一条蓝线，显示980px应该在哪里。

在Chrome中：

请注意页面顶部的工具栏未调整大小，搜索字段区域仍然是基于原始宽度居中，而不是新的980px宽度。

在Firefox中：

请注意搜索区域的重新定位方式，但工具栏（如Chrome）仍然是文档的整个宽度。

我能做些什么，以便在所有网站和所有浏览器中将页面正确调整为980px？

Answer 1

如果没有使用javascript，我认为只有使用CSS的跨浏览器解决方案。并非所有浏览器都支持max-width。

Answer 2

好吧，我不知道如何在浏览器中以像素为单位获得最小或最大宽度，但是我想分享这个，因为我看了几个小时如何正确地做到这一点，而不是最终，为我的应用程序，发现纵横比在浏览器中是一致的，可以间接用于限制div的最小/最大大小，这是对我有用的代码，也许对某人有帮助：

  w = $(window).innerWidth();
  h = $(window).innerHeight();
  ratio = w/h;
  if (ratio<1){
  $('.classdivtofix').css('min-width', $(window).innerWidth()/ratio);