Question

如何实现在调整浏览器窗口大小时缩放的网页？

我可以使用表格或CSS浮动部分布置页面元素，但我希望在调整浏览器窗口大小时重新缩放显示

我有一个使用AJAX PRO和DIVs使用overflow：auto和onwindowresize钩子的工作解决方案，但它很麻烦。还有更好的方法吗？

感谢大家到目前为止的答案，我打算尝试所有（或至少大部分），然后选择最佳解决方案作为此线程的答案
使用CSS和百分比似乎效果最好，这是我在原始解决方案中所做的;使用可见性：隐藏div设置为100％×100％提供了一种方法来测量窗口的客户区域[否则在IE中很难]，并且onwindowresize javascript函数允许AJAXPRO方法在调整窗口大小以重绘时启动新分辨率下的布局单元格内容

编辑：我为不完全清楚而道歉;我需要一个“液体布局”，主要元素（'窗格'）会随着浏览器窗口的大小调整而缩放。我发现在调整大小后我必须使用AJAX调用重新显示“窗格”内容，并保持溢出：自动打开以避免滚动

Answer 1

而不是在css中说“宽度：200px”，而是使用像“width：50％”这样的东西

这使得它使用50％的任何东西，所以在以下情况下：

<body>
 <div style="width:50%">
  <!--some stuff-->
 </div>
</body>

div现在总是占据窗口的一半。

Answer 2

除非你在这里有一些具体要求，否则我不确定为什么需要JS。表格布局是在html中制作流畅布局的简单（和过时）方式，但是带有css的div布局也允许流畅布局，请参阅http://www.glish.com/css/2.asp

Answer 3

是的，你想要看一下流畅的CSS布局。对于这方面的资源，只需谷歌流畅的CSS布局，应该给你很多东西来检查。另请查看this previous question以获取一些好的指示。

Answer 4

这实际上取决于您正在实施的网页。作为一般规则，您将需要100％的CSS。当调整包含文本的元素时，请记住倾向于面向文本的大小，例如em，ex和not px。

如果您是CSS的新手，浮动是危险的。我不是新人，他们仍然有点莫名其妙。尽可能避免使用它们。通常，您只需修改您正在处理的div或元素的display属性。

如果您执行所有这些操作并在网络中搜索有其他困难的网页，则不仅会在浏览器执行此操作时调整页面大小，还会调整可以通过调整文本大小来放大和缩小的页面。基本上，做得对，设计是牢不可破的。我已经看到它在复杂的布局上完成了，但它在很多工作上，与在某些情况下编程网页一样多。

我不确定你是在为这个网站做什么（有趣，有利可图），但是我建议你仔细考虑如何在这里和那里帮助你平衡CSS纯度提高你的效率。您的网站是否有100％可访问的业务需求？没有？然后拧紧它。做你需要做的事情先赚钱，然后用你的激情去疯狂，做任何你有时间的事情。

Answer 5

还需要考虑的是，在调整窗口大小时JavaScript不会持续更新，因此会出现明显的延迟/波动。通过流畅的CSS布局，屏幕元素几乎可以立即更新，实现无缝过渡。

Answer 6

我看到这样做的最好方法是使用YUI CSS工具，然后使用百分比表示所有内容。 YUI Grids允许各种固定宽度或流体布局，列大小指定为可用空间的分数。有YUI Grids Builder来帮助解决问题。 YUI Fonts为您提供了良好的字体大小控件。有一些不错的cheat sheets可用于向您展示如何布置内容以及有用的内容，例如为这么多像素的字体大小指定的百分比。

这可以缩放定位，但是当浏览器窗口调整大小时整个网站的缩放比例（包括字体大小）有点棘手。我认为你将不得不为此编写某种浏览器插件，这意味着你的解决方案将是不可移植的。如果您在Intranet上，这不是太糟糕，因为您可以控制每个客户端上的浏览器，但如果您想要一个可在Internet上使用的站点，那么您可能需要重新考虑您的UI。

Answer 7

在尝试了本书的解决方案之后，我在Firefox或IE中遇到了不兼容问题。所以我做了一些修补，想出了这个CSS。如您所见，边距是所需尺寸的一半而且是负数。

<head><title>Centered</title>
<style type="text/css">
body { 
        background-position: center center;
        border: thin solid #000000;
        height: 300px;
        width: 600px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -150px;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: -300px;
    }
</style></head>

希望有所帮助

Answer 8

使用百分比！假设您有一个“主窗格”，其中包含您网页的所有内容。您希望它始终在窗口中居中，并且是窗口宽度的80％。

只需这样做：
#centerpane { 保证金：自动; 宽度：80％; }

多田！

Answer 9

感谢所有的建议！看起来我必须做的丑陋的东西是必要的。以下工作（在我的机器上，无论如何）在IE和FireFox中。我稍后可以为CodeProject.com制作一篇文章; - ）

这个javascript进入＆lt; head＆gt;部分：

<script type="text/javascript">
var tmout = null;
var mustReload = false;

function Resizing()
{
    if (tmout != null)
    {
        clearTimeout(tmout);
    }
    tmout = setTimeout(RefreshAll,300);
}
function Reload()
{
    document.location.href = document.location.href;
}
//IE fires the window's onresize event when the client area 
//expands or contracts, which causes an infinite loop.
//the way around this is a hidden div set to 100% of 
//height and width, with a guard around the resize event 
//handler to see if the _window_ size really changed
var windowHeight;
var windowWidth;
window.onresize = null;
window.onresize = function()
{
    var backdropDiv = document.getElementById("divBackdrop");
    if (windowHeight != backdropDiv.offsetHeight ||
        windowWidth != backdropDiv.offsetWidth)
    {
        //if screen is shrinking, must reload to get correct sizes
        if (windowHeight != backdropDiv.offsetHeight ||
            windowWidth != backdropDiv.offsetWidth)
        {
            mustReload = true;
        }
        else
        {
            mustReload = mustReload || false;
        }
        windowHeight = backdropDiv.offsetHeight;
        windowWidth = backdropDiv.offsetWidth;
        Resizing();
    }
}
</script>

＆lt; body＆gt;像这样开始：

<body onload="RefreshAll();">
    <div id="divBackdrop" 
        style="width:100%; clear:both; height: 100%; margin: 0; 
            padding: 0; position:absolute; top:0px; left:0px; 
            visibility:hidden; z-index:0;">
    </div>

DIV向左浮动以进行布局。我必须将高度和宽度设置为完全量（例如，99.99％，59.99％，39.99％）的百分比，以防止浮动包裹，可能是由于DIV上的边界。

最后，在内容部分之后，另一个javascript块来管理刷新：

var isWorking = false;
var currentEntity = <%=currentEntityId %>;

//try to detect a bad back-button usage;
//if the current entity id does not match the querystring 
//parameter entityid=###
if (location.search != null && location.search.indexOf("&entityid=") > 0)
{
    var urlId = location.search.substring(
        location.search.indexOf("&entityid=")+10);
    if (urlId.indexOf("&") > 0)
    {
        urlId = urlId.substring(0,urlId.indexOf("&"));
    }
    if (currentEntity != urlId)
    {
        mustReload = true;
    }
}
//a friendly please wait... hidden div
var pleaseWaitDiv = document.getElementById("divPleaseWait");
//an example content div being refreshed via AJAX PRO
var contentDiv = document.getElementById("contentDiv");

//synchronous refresh of content
function RefreshAll()
{
    if (isWorking) { return; }  //no infinite recursion please!

    isWorking = true;
    pleaseWaitDiv.style.visibility = "visible";

    if (mustReload)
    {
        Reload();
    }
    else
    {
        contentDiv.innerHTML = NAMESPACE.REFRESH_METHOD(
            (currentEntity, contentDiv.offsetWidth, 
             contentDiv.offsetHeight).value;
    }

    pleaseWaitDiv.style.visibility = "hidden";
    isWorking = false;
    if (tmout != null)
    {
        clearTimeout(tmout);
    }
}

var tmout2 = null;
var refreshInterval = 60000;

//periodic synchronous refresh of all content
function Refreshing()
{
    RefreshAll();
    if (tmout2 != null)
    {
        clearTimeout(tmout2);
        tmout2 = setTimeout(Refreshing,refreshInterval);
    }
}

//start periodic refresh of content
tmout2 = setTimeout(Refreshing,refreshInterval);

//clean up
window.onunload = function() 
{
    isWorking = true;
    if (tmout != null)
    {
        clearTimeout(tmout);
        tmout = null;
    }
    if (tmout2 != null)
    {
        clearTimeout(tmout2);
        tmout2 = null;
    }

很丑，但它确实有效 - 我猜它真正重要; - ）

Answer 10

使用ems。 jontangerine.com和simplebits.com都是令人惊叹的例子。进一步阅读 - The Incredible Em & Elastic Layouts with CSS by Jon Tan

Answer 11

＆LT; body onresize =“resizeWindow（）”onload =“resizeWindow（）”＆gt; 页＆LT; / body＆gt;

    /**** Page Rescaling Function ****/

    function resizeWindow() 
    {
        var windowHeight = getWindowHeight();
        var windowWidth = getWindowWidth();

        document.getElementById("content").style.height = (windowHeight - 4) + "px";
    }

    function getWindowHeight() 
    {
        var windowHeight=0;
        if (typeof(window.innerHeight)=='number') 
        {
            windowHeight = window.innerHeight;
        }
        else {
            if (document.documentElement && document.documentElement.clientHeight) 
            {
                windowHeight = document.documentElement.clientHeight;
            }
            else 
            {
                if (document.body && document.body.clientHeight) 
                {
                    windowHeight = document.body.clientHeight;
                }
            }
        }
        return windowHeight;
    }

我目前正在处理的解决方案需要对宽度进行一些更改，否则高度到目前为止工作正常^^

-Ozaki

如何实现在调整浏览器窗口大小时缩放的网页？

11 个答案: