1

ブラウザー ウィンドウの中央に div (#box) を配置しています。これは、縦 600 ピクセル以上のブラウザーにとってはグルーヴィーです。ウィンドウがそれよりも小さい場合、div の上部にあるコンテンツが切り取られ、スクロール バーは (スクロール バーを下に引っ張ったときに) ページを上にスクロールするだけなので、上端の上に隠れているものを見ることは不可能です。スクロールバーが一番上の位置にある場合でもウィンドウ。

div を中央に配置する方法は次のとおりです。小さなブラウザー ウィンドウで div の上部が切り取られる理由がわかります。

{position: absolute; top: 50%; left: 50%; width: 1930px; height: 607px; margin-left: -965px; margin-top: -302px;}

(最も幅の広い画面でも動作するアニメーションに対応できるように、幅は非常に広いです。幅は問題ではありません。)

参照するページは次のとおりです: http://ianmartinphotography.com/test-site/
そして私のCSS: http://ianmartinphotography.com/test-site/css/basic.css

これは、私の CSS スタイル シートで簡単に修正できますが、600px より大きいモニターと 600px より小さいモニターの両方で使用できないようです。

では、ブラウザー ウィンドウのサイズを検出して、2 つの異なる CSS スタイル シートのいずれかを選択するにはどうすればよいでしょうか。小さな窓用に 1 つ、大きな窓用に 1 つ？私のためにこれを行うjqueryスクリプトはありますか?

または、小さなブラウザー ウィンドウで div の上部にアクセスできるように、スクロールを許可するCSS を使用してブラウザー ウィンドウの中央に div の中心を作成する別の方法はありますか?

ご感想ありがとうございます！

4

7 に答える 7

4

@media クエリは私の好みです (ソリューション自体が気に入らないことがわかりました)。

<link...media="only screen and (max-height: 600px)" href="small-device.css" />
    small-device.css = div.container { ... height:500px; margin:50%; ...}

<link...media="only screen and (min-height: 601px)" href="big-device.css" />
    big-device.css = div.container {... height:600px; margin:50%; ...}

また、絶対的な位置付けを削除して、通常のドキュメント フローを利用することで、もう少し運が良くなる場合もあります。{ overflow-y:scroll; } これらの非表示の画面の高さの div のようなものを追加すると役立ちます。

最終的に、ハンドヘルド デバイスを中心に設計しようとしている場合は、メディア クエリがある程度必要になると思います。私の Android 画面 (たとえば) には 3 つの表示オプション (低、中、高解像度) があります。3 つのクロップ ページすべてが異なります。

于 2011-03-20T01:59:53.570 に答える
1

Jqueryでウィンドウサイズを決定できます

$(window).width();
$(window).height();

また

$(document).width();
$(document).height();

次にcssを変更します

$("link").attr("href", "blue.css");

このようなもの：

$(document).ready(function(){

 if($(document).height()  > 600 or $(window).height() > 600){

   $("link").attr("href", "600+.css");

 } else {

   $("link").attr("href", "600-.css");

 }
});
于 2011-03-20T01:08:25.313 に答える
1

すべての主要なブラウザーで機能するソリューション。JS は必要ありません。コンテンツがビューポートよりも大きい場合、垂直方向/水平方向の中央に配置され、スクロール可能で、上部に固定されます。

HTML:

<div id="body">[your content goes here]</div>

CSS:

html, body {
    width: 100%;
    height: 100%;
    }

html {
    display: table;
}

body {
    display: table-cell;
    vertical-align: middle;
}

#body {
    margin: 0 auto;
}

最後のルールを適用することを忘れないでください。これにより、実際に水平方向のセンタリングが実行されます。

于 2011-03-20T02:37:57.687 に答える
0

次のJavaScript条件を使用して、画面サイズを検出します。

function x()<head>タグへのCSSリンクの挿入を処理します。関数を呼び出してCSSファイル名を渡すだけです。

< script type = "text/javascript" >
<!--
function x(y) {
    var styles = y;
    var newSS = document.createElement('link');
    newSS.rel = 'stylesheet';
    newSS.href = 'data:text/css,' + styles;
    document.getElementsByTagName("head")[0].appendChild(newSS);
}

if ((screen.width >= 1024) && (screen.height >= 768)) {
    x('file.css');
}
else {
    x('file1.css');
}
//-->
< /SCRIPT>
于 2011-03-20T00:53:29.447 に答える
0

ちょっとグーグルして、これを見つけました：

http://www.ilovecolors.com.ar/detect-screen-size-css-style/

それはあなたのために働きますか？

于 2011-03-20T00:54:59.663 に答える
0

「document_height」が機能しない場合は、「window_height」をコードでコメントしてみてください。

$("link").attr("href", "css_file_path");// ここに CSS へのパスを挿入する必要があります。以下のコードで置き換えます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>

<script type="text/javascript">

$(document).ready(function(){

document_height = $(document).height();
//window_height = $(window).height();

//if(window_height  > 600){
 if(document_height  > 600){
    alert('Bigger than 600px height: ' + $(document).height());
   $("link").attr("href", "600+.css"); // Here load css if window is bigger then 600px;

 } else {
    alert('Smaller than 600px height: ' + $(document).height());
   $("link").attr("href", "600-.css"); // Here load css if window is smaller then 600px;

 }
});

</script>
于 2011-03-22T11:15:44.640 に答える
0

Less CSS フレームワークを試す: http://lessframework.com/、

JavaScript は必要ありませんが、CSS @Media を使用して、解像度/画面サイズに基づいてスタイルを設定できます。

幸運を祈ります

于 2011-03-20T01:01:34.040 に答える