2009-03-11 16 views
2

HTMLでは、Webページをユーザーのモニターに展開する方法はありますか?私は15インチ持っていると言うように、他の誰かが24インチを持っています。ウェブページは画面上では小さくなりますが、最小限に収まるでしょう。ページを100%、あるいは95%に拡大するにはどうすればよいですか?ウェブページの幅を自動的に変更するにはどうすればよいですか?

+0

モニターインチに基づくサイズは世界にはないソフトウェアはありません。ピクセルが必要です。 – tsilb

+0

ブラウザのサイズを変更することは、ユーザーのCRAPを邪魔するための確かな手段です。私はこれを行う経費報告ツールを私に使用しなければならない。大型モニターを使用している私たちは、一般にウィンドウを最大化することを望まないし、ウィンドウを必要としません。 –

+0

Geezeの人々は、愚かなコメントを投稿する前に質問を読んでください。 –

答えて

1

サイズを明示的に設定しない限り、ページはデフォルトでブラウザウィンドウの全幅を使用します。

ブラウザのウィンドウを特定のサイズにすばやく変更できるため、FirefoxのWeb Developerプラグインが便利な場合があります。その結果、レイアウトがさまざまなサイズでどのように見えるかを確認できます。あなたのCSSのその後

<div id="content"> 
<!-- Some content in here --> 
<div> 

#content { 
    width:100%; 
} 

以上の制御のために:あなたのHTML内https://addons.mozilla.org/en-US/firefox/addon/60

0

あなたは、任意の要素のための特定の幅を指定しない限り

#content { 
    min-width:500px; 
    max-width:1000px; 
} 
1

本体や一部のdivなどのWebページは、ブラウザウィンドウの幅に拡大されます。あなたは、ユーザーの幅にサイズをピクセル単位で設定するために探している場合は

、あなたは動的に幅を設定するためにJavaScriptを使用することができます。

<script type="text/javascript"> 
var userWidth = screen.width; 
var userHeight = screen.height; 
</script> 

しかし、あなたはおそらく、自動的に拡大するより多くの流体のレイアウトを使用する必要がありますパーセントで指定された幅を使用して(たとえば、CSSで要素の幅を設定するなど)

+0

これを絶対にしないでください。これまでIMHOは、これをポップアンダーよりわずかに面倒ですが、ほんのわずかです。ユーザーがブラウザの使い方を知っていることを信頼するほうがはるかに優れており、スクロールバーが必要ない場合は、自分のウィンドウのサイズを変更します。 – RBerteig

3

流体の幅はパーセント単位またはem単位で指定します。グリッドとコンテナに基づいてサイトレイアウトを作成することです。 Read more

0

(テキスト)内容の意味を説明するためのHTMLはただmarkup languageです。たとえば、<h1>Foobar</h1>は、最初のレベルの見出しですが、表示する必要があるスタイルについては何も教えていないことを意味します。Foobar

HTML文書をスタイリングするためにCascading Style Sheets (CSS)が導入されました。しかしCSSは単なる記述言語であり、user agentについて何も知らない。 (特定の要素が特定の幅などで表示されるように記述することができます)

しかし、JavaScriptはユーザーエージェントを認識しています。 screenオブジェクトを使用して、画面のwidthheight、または利用可能なviewportを取得できます。

0

ボブがモニタの実際のサイズやウィンドウのサイズについて質問しているかどうかについて、いくつかの混乱があると思います。

ジョシュ・ストドラとリッチ・ブラッドショーは、割合を使ってウインドウを拡大する流体レイアウトを作成するHTML/CSS回答を提供しました。次のコードでは、現在のブラウザウィンドウの80%を占める2つの列と、20%を占めるもう1つの列を作成して、この手法の概要を示します。ユーザーがウィンドウのサイズを変更すると、列のサイズが変更されます。

<html> 
<head> 
<style type="text/css"> 
    #content1 { 
     background: #CC0000; 
     height: 300px; 
     width: 80%; 
     float: left; 
    } 
    #content2 { 
     background: #00CC00; 
     height: 300px; 
     width: 20%; 
     float: left; 
    } 
</style> 
</head> 
<body> 
<body> 

<div id="content1"></div> 

<div id="content2"></div> 

</html> 

Rudd Zwolinskiが、ユーザーの現在の解像度を探す答えを提供しました。他の人は既にこの方法を使用することによって引き起こされる潜在的な煩わしさを投稿しましたが、私は分かりません。おそらく、解像度の大きさに関する芸術的な発言をしているかもしれません。このメソッドを使用した上記のコードは同じです:

<html> 
<head> 
<style type="text/css"> 
    #content1 { 
     background: #CC0000; 
     height: 300px; 
     float: left; 
    } 
    #content2 { 
     background: #00CC00; 
     height: 300px; 
     float: left; 
    } 
</style> 
<script type="text/javascript"> 
    var userWidth = screen.width; 
    var userHeight = screen.height; 

    function resizeContent() 
    { 
     document.getElementById("content1").style.width = parseInt(userWidth * 0.8); 
     document.getElementById("content2").style.width = parseInt(userWidth * 0.2); 
    } 
</script> 
</head> 
<body onload="resizeContent()"> 

<div id="content1"></div> 

<div id="content2"></div> 

</html> 

2

Gumbo、 "page"はあなたがWebページの内容を意味するのか、ページを含むウィンドウを意味しますか?ウィンドウを意味する場合は、答えは「しない」です。コンテンツを意味する場合は、液体レイアウトを使用できます。 Googleです。

+0

私はOPがウィンドウを意味すると考えました。 "しないでください"それはサイトがこれをしたときに私を怒らせるために使用されました。その他IE/FFでその機能を無効にすることができて感謝しています。 – NotMe

関連する問題