6

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

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

我有一个使用 AJAX PRO 和带有溢出：自动和 onwindowresize 钩子的 DIV 的工作解决方案，但它很麻烦。有没有更好的办法？

  • 感谢大家到目前为止的答案，我打算尝试所有（或至少大部分），然后选择最佳解决方案作为该线程的答案

  • 使用 CSS 和百分比似乎效果最好，这是我在原始解决方案中所做的；使用可见性：hidden div 设置为 100% by 100% 提供了一种测量窗口客户区的方法[否则在 IE 中很困难]，并且 onwindowresize javascript 函数允许 AJAXPRO 方法在调整窗口大小以重绘时启动新分辨率下的布局单元格内容

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

4

11 回答 11

14

而不是在css中使用“宽度：200px”，使用“宽度：50％”之类的东西

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

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

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

于 2008-09-18T06:56:31.017 回答
7

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

于 2008-09-18T06:57:29.500 回答
5

是的，听起来你想看一个流畅的 CSS 布局。对于这方面的资源，只需 google 流畅的 CSS 布局，应该会给你很多东西来检查。另请查看this previous question以获得一些好的指示。

于 2008-09-18T07:07:29.853 回答
5

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

如果您是 CSS 新手，浮动是危险的。我不是新手，他们对我来说仍然有些莫名其妙。尽可能避免它们。通常，您只需要修改您正在处理的 div 或元素的显示属性。

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

我不确定你做这个网站是为了谁（乐趣，利润，两者兼而有之），但我建议你仔细思考如何平衡 CSS 纯度，并在这里和那里使用一些技巧来帮助提高你的效率. 您的网站是否有业务需要 100% 可访问？不？然后拧一下。先做你需要做的事情来赚钱，然后用你的热情去疯狂，做任何你有时间做的事情。

于 2008-09-18T07:11:54.130 回答
4

需要考虑的其他一点是，在调整窗口大小时 JavaScript 不会持续更新，因此会有明显的延迟/断断续续。使用流畅的 CSS 布局，屏幕元素几乎会立即更新以实现无缝过渡。

于 2008-09-18T07:09:02.720 回答
2

我见过的最好的方法是使用YUI CSS 工具，然后对所有内容使用百分比。YUI 网格允许各种固定宽度或流体布局，列大小指定为可用空间的一部分。有一个YUI Grids Builder可以帮助布局。YUI Fonts为您提供良好的字体大小控制。有一些不错的备忘单可以向您展示如何布局和有用的东西，例如为这么多像素的字体大小指定多少百分比。

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

于 2008-09-18T07:10:54.010 回答
1

在尝试了本书的解决方案后，我在 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>

希望有帮助

于 2008-09-18T07:21:00.460 回答
1

使用百分比！假设您有一个“主窗格”，所有页面的内容都位于其中。您希望它始终位于窗口的中心，并且是窗口宽度的 80%。

只需这样做：
#centerpane{ 边距：自动；宽度：80%；}

多田！

于 2008-09-23T03:34:05.757 回答
1

感谢所有的建议！看起来我不得不做的丑陋的事情是必要的。以下在 IE 和 FireFox 中有效（无论如何在我的机器上）。稍后我可能会为此为 CodeProject.com 写一篇文章；-)

此 javascript 位于 <head> 部分：

<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>

<body> 开头是这样的：

<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;
    }

丑陋，但它有效 - 我猜这才是真正重要的;-)

于 2008-10-08T03:23:17.447 回答
1

使用 ems。jontangerine.com和simplebits.com都是很棒的例子。进一步阅读——Jon Tan 的 CSS 令人难以置信的 Em 和 Elastic 布局

于 2008-11-13T06:04:36.630 回答
0

<body onresize="resizeWindow()" onload="resizeWindow()" > 页</body> 

    /**** 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;
    }

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

-尾崎

于 2010-01-29T05:13:27.277 回答