6

ブラウザ ウィンドウのサイズが変更されたときにスケーリングする Web ページを実装する方法は?

テーブルまたは CSS フロート セクションのいずれかを使用してページの要素をレイアウトできますが、ブラウザー ウィンドウのサイズが変更されたときに表示を再スケーリングする必要があります。

AJAX PRO と DIV を使用して、overflow:auto と onwindowresize フックを使用する実用的なソリューションがありますが、面倒です。より良い方法はありますか？

  • これまでの回答に感謝します。すべて（または少なくともほとんど）を試してから、このスレッドへの回答として最適なソリューションを選択するつもりです

  • CSS とパーセンテージを使用するのが最もうまくいくようです。これは、元のソリューションで行ったことです。100% x 100% に設定された visibility:hidden div を使用すると、ウィンドウのクライアント領域を測定する方法が得られます [それ以外の場合は IE では困難です]。新しい解像度でのレイアウト セルの内容

編集：完全に明確ではないことをお詫びします。ブラウザー ウィンドウのサイズが変更されると、主要な要素 (「ペイン」) が拡大縮小される「リキッド レイアウト」が必要でした。サイズ変更後に「ペイン」の内容を再表示するには、AJAX 呼び出しを使用し、overflow:auto をオンにしてスクロールを回避する必要があることがわかりました。

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 レイアウトを見たいようですね。これに関するリソースについては、グーグルの流動的な CSS レイアウトだけで、確認すべきことがたくさんあります。いくつかの良い指針については、この前の質問もご覧ください。

于 2008-09-18T07:07:29.853 に答える
5

実装している Web ページに大きく依存します。原則として、100% CSS が必要です。テキストを含む要素のサイズを変更するときは、px ではなく em、ex などのテキスト指向のサイズに引き寄せられることを忘れないでください。

CSS を初めて使用する場合、フロートは危険です。私は新しくないので、彼らはまだ私をやや困惑させています. 可能な限りそれらを避けてください。通常、とにかく作業している div または要素の表示プロパティを変更する必要があります。

これらすべてを実行し、さらに問題がある Web を精査すると、ブラウザがサイズ変更するときにページのサイズが変更されるだけでなく、テキストのサイズを変更してズームインおよびズームアウトできるページも作成されます。基本的に、正しく行えば、デザインは壊れません。複雑なレイアウトでそれが行われるのを見たことがありますが、特定のインスタンスで Web ページをプログラミングするのと同じくらい多くの労力が必要です。

あなたがこのサイトを誰のために (楽しさ、利益、両方) のために運営しているのかはわかりませんが、効率を高めるためにあちこちでいくつかのハックを使用して、CSS の純粋性とのバランスをどのように取るかについて、じっくりと考えることをお勧めします。 . あなたの Web サイトには、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は、適切なフォント サイズ コントロールを提供します。レイアウト方法や、非常に多くのピクセルのフォント サイズに対して指定するパーセンテージなどの便利な機能を示す便利なチート シートがいくつかあります。

これにより、位置のスケーリングが可能になりますが、ブラウザー ウィンドウのサイズが変更されたときのフォント サイズを含むサイト全体のスケーリングは少し複雑です。これには、何らかのブラウザ プラグインを作成する必要があると考えています。つまり、ソリューションは移植性がありません。イントラネットを使用している場合は、各クライアントでブラウザーを制御できるのでそれほど悪くはありませんが、インターネットで利用できるサイトが必要な場合は、UI を再考する必要があるかもしれません.

于 2008-09-18T07:10:54.010 に答える
1

パーセンテージを使用してください！ページのすべてのコンテンツが置かれる「メインペイン」があるとします。常にウィンドウの中央に配置し、ウィンドウの幅の80％にする必要があります。

これを行うだけです：
#centerpane {margin：auto; 幅：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 はレイアウトの左にフロートします。おそらくDIVの境界が原因で、フロートが折り返されないように、高さと幅を完全な量より少し少ないパーセンテージ（たとえば、99.99％、59.99％、39.99％）に設定する必要がありました。

最後に、コンテンツ セクションの後に、更新を管理する別の 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

本で解決策を試した後、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

emsを使用します。jontangerine.comとsimplebits.comはどちらも素晴らしい例です。さらに読む - Jon Tan による CSS を使用した信じられないほどの Em & Elastic Layouts

于 2008-11-13T06:04:36.630 に答える
0

< body onresize="resizeWindow()" onload="resizeWindow()" > PAGE < /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 に答える