0

これは、JS私のページの名前付けで画面解像度を検出し、index.htmlそれをphpに送信して、値を次のように取得できるようにするためのものです$_GET：-

<script type="text/javascript">

width = screen.availwidth;
height = screen.availheight;

if (width > 0 && height >0) {
    window.location.href = "http://localhost/main.php?width=" + width + "&height=" + height;
} else 
    exit();

</script>

これは私のPHPファイルの命名の内容ですprocess.php：-

<?php
$screen_width = $_GET['width'];
$screen_height = $_GET['height'];

//EDITED PORTION
echo '<style>#Wrapper {width:'.$screen_width.';}</style>';
?>

画面サイズを取得した後、を表示したいと思いますindex.php。

私が物事を機能させたい方法を理解するために、これらのステップに注意してください：-

  1. ページの読み込みが開始されました
  2. Javascriptが利用可能な画面幅を検出しました。
  3. それをphpファイルに渡し、PHP変数が画面の使用可能な画面幅を取得します。
  4. 次に、そのphp変数を使用してページが表示されます（ページ幅がそのphp変数を使用して設定されていることを意味します）

プロセス全体で、index.phpをリロードしないでください。それで、それはどのように行うことができますか？

編集：

JSパスがロードされるphpファイルに値を渡すときに、画面の解像度を取得し、それに応じてWebサイトのページ幅を設定する必要があります。しかしJS、データをphpファイルに送信し、ajaxを介して取得した場合、ウェブサイトが完全に読み込まれ、ajaxが機能する前にすべてのものが既に読み込まれているため、スタイルが実装されない可能性があります。

十分に効率的な方法はありますか、それとも効率的になる方法でこれを行うことができますか。

これは私の編集です：2

より明確にするために、私は実際に次の画像を使用して達成したいことを説明します：-

実はこんなものを実装したい

画面の解像度が悪い場合は、左側800pxを差し引く必要があることがわかっているので、2つしか追加できません。したがって、これを正しく表示しないように、Webサイトのページ幅をに調整します。200px600pxdivs250px100px700px

PHPでできることですが、同じページですべてのことを同時に実行するにはどうすればよいですか？

#Wrapper あなたが右の1つとして 左の領域として呼び出すことができる全体の領域#SideBar #LeftContent

私が物事をうまく説明したことを願っています。だから誰かが私が必要なことをするのを手伝ってくれるならお願いします:)

4

3 に答える 3

4

私があなたの問題を理解したかどうかはわかりませんが、これが私が持っているものです。画面の幅だけを取得してからクラスを設定する場合は、そのようにすることをお勧めしません。それは良くありません。将来、ページレイアウトを変更する必要がある場合は、これらすべてをphpにエコーすることで運命づけられ、多くのリダイレクトを回避できます（index.html-> process.php-> index.php ）。

あなたの例では、すべてをJavascriptで行うことができます。

これはJQueryの例です

var width = $(window).width(); //get the width of the screen
$('#Wrapper').css("width",width); //set the width to the class

アイデアが非常に異なる画面解像度（PCからスマートフォンまで）である場合は、アプローチを変更することを検討する必要があります。

幸運を ：）

これを試してください:(私はあなたが望むものだと信じています）

これは、JSとCSSだけで実行できます。次に例を示します。

ボディマージンとテストdivのスタイルを設定します。

<style type="text/css">
    body {
        margin: 0px 0px 0px 200px;
}
    .divForTesting {
        width: 250px;
        border: 1px solid green;
        height: 100px;
        float: left;
}
</style>

次に、次のスクリプトを追加します。

<script>
    // get the screen width
    var width = $(window).width();
    // get the number of pixels left in the screen (which is the width
    // minus the margin you want, rest by 250px which is the "inner boxes" width)
    var size = (width - 200) % 250;
    // then re-set the margin (the "-10" is because you'll need extra space
    // for borders and so on)
    $('body').css("margin-left",200+(size-10));
</script>

そしてこのhtmlでそれをテストしてください：

<!-- I've aligned the outter div to the right -->
<div style="border: 1px solid red; float:right;" id="test">
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
</div>

さまざまな解像度で動作します。

試してみる ：）

于 2012-04-04T10:39:32.643 に答える
1

私はついに自分の質問の解決策を手に入れました:)

<script type="text/javascript">
var width = screen.availWidth;
var fwidth = (width - 270);
var i, k = 0;
var j =2;
for (i=1; i<=j; i++)
{
    fwidth = fwidth - 220;
    if (fwidth < 220)
    {
        j = j -1;
    }
    else {
        k = k + 1;
        j = j + 1;
    }
}
var containerwidth = (width - (fwidth + 10));
var contentwidth = containerwidth - 250;
document.write('<style type="text/css"> .container {width:' + containerwidth + 'px; } .mainContent { width:' + contentwidth + 'px; } </style>');
</script>

contentwidth灰色のコンテンツはcontainerwidthどこにあり、#Wrapper私が尋ねた質問によると...

于 2012-04-04T12:50:24.783 に答える
0

jQueryのようなjavascriptlibを使用できます。それ以外の：

window.location.href = "http://localhost/main.php?width=" + width + "&height=" + height;

あなたは呼び出すことができます：

$.get("http://localhost/main.php?width=" + width + "&height=" + height, function(data, textStatus, jqXHR) {
    // replace the html body with the output of main.php
    $('body').html(data); // you might want to customize that
});

$ .get（）jQuery関数のドキュメント。

于 2012-04-04T10:16:27.657 に答える