HTMLレイアウトを画面サイズに調整する

HTMLレイアウトを自動的に画面解像度で修正する方法を教えてください。例として、1024×768ピクセルの画面解像度でHTMLをコーディングしています。 800×600ピクセルに切り替えると、画面を修正するためにHTMLウィンドウが自動的に変更されます。HTMLレイアウトを画面サイズに調整する

どうすればいいですか？

出典

2009-03-24 kumar

私は質問を理解しているかどうかわかりません。ブラウザが自動的に最大画面解像度に合わせてウィンドウのサイズを変更する方法を尋ねていますか？ –

あなたはjavascriptを使う必要はありません。 CSSファイルで要素の幅（div、tableなど）を100％に設定するだけです。これは、ビューポートの幅に応じて調整されます。

<!-- in yourHtml.html file --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
    <link rel="stylesheet" type="text/css" href="yourStyleSheet.css" /> 
    </head> 

    <body> 
    <div class="fullWidth"> 
     Your content 
    </div> 
    </body> 

</html> 

<!-- in yourStyleSheet.css file --> 
div.fullWidth { 
    width:100%; 
    height:100%; 
    background-color:#CCC; 
}

出典

2009-03-24 09:36:02 andi

あなたは、実際のブラウザのウィンドウを意味する場合は、Javascriptが現在の解像度を返しscreen.widthとscreen.heightを持っている（同じことは、高さに適用されます）。 examples of useを参照してください。特定のWebページでは、タイマーで実行されるスクリプトを設定して、これらの値が変更されているかどうかをチェックし、ウィンドウのサイズを変更することができます。これは独特の成果だと思われますが、画面の解像度はあまり変わらず、このJSスクリプトが含まれている特定のページにいなければなりません。また、幅と高さのプロパティは、ツールバーがどこに座っているかに注意を払わないので、ウィンドウがその背後に隠れる可能性があることにも注意してください。自動最大化はユーザが好むかもしれないものを無効にするので、これも悪い動作です。

出典

2009-03-24 09:41:57

あなたの質問はあいまいなので、私はあなたの問題に関連するかもしれないいくつかの例を手伝っています。

JavaScriptを使用して、ブラウザウィンドウのサイズを取得する必要がある場合は、ここでは一例です：

function getClientSize() { 
    var width = 0, height = 0; 

    if(typeof(window.innerWidth) == 'number') { 
     width = window.innerWidth; 
     height = window.innerHeight; 
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
     width = document.documentElement.clientWidth; 
     height = document.documentElement.clientHeight; 
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { 
     width = document.body.clientWidth; 
     height = document.body.clientHeight; 
    } 

    return {width: width, height: height}; 
}

は、プログラムwindow.onresizeイベントにリスナーを添付し、ブラウザウィンドウのサイズ変更を検出します。以下の簡単な例は、すでに添付リスナー（代わりに、必要に応じてaddEventListenerを/ attachEventを使用）がある場合は気にしないことに注意してください：HTMLウィンドウによって

window.onresize = function() { 
    var size = getClientSize(); 
    alert("Width: " + size.width + ", Height: " + size.height); 
}

出典

2009-03-24 09:48:53 stpe

が、私はあなたがHTMLの内容について話していることを前提とし、ブラウザウィンドウではありません。

これが該当する場合、実行するキーワードはliquid/fluid/elastic designです。

A List ApartサイトのElastic Design by Patrick Griffithsまたはsearch google for liquid designをお読みください。

出典

2009-03-24 09:48:56 mouviciel

それは非常に奇妙です、[デモンストレーションページ]（http://www.htmldog.com/articles/elasticdesign/demo/）は私のより広いモニターにフィットしていません。？ –

HTMLレイアウトを画面サイズに調整する

答えて

関連する問題