javascript変数に画面幅を取得し、ページロードを避けるためにajaxを通してphpページに送信

Question

これは、という名前のページで画面解像度を検出して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> 

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

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

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

を今すぐ画面サイズを取得した後、私はindex.phpを表示したいです。

NOTEは、私は物事が仕事をしたい方法を理解するための手順は、： -

1. ページの読み込みが
2. Javascriptが利用できる画面の幅を検出し始めます。
3. これはPHPファイルに渡し、PHP変数は画面の画面幅を取得します。次に、ページは、そのPHP変数を使用して表示取得
4. はindex.phpがリロードされるべきではないプロセス全体において

（ページ幅はそのPHPの変数を使用して設定されていることを意味します）。 それで、どのようにすることができますか？ EDIT

：JSとして

は、それがロードされるPHPファイルに値を渡すには、私が何をしたい画面の解像度を取得することですし、それに応じてウェブサイトのページの幅を設定します。しかし、もしJSがphpファイルにデータを送ってきたら、私たちはajaxを通してそれを取得します。私のウェブサイトは完全にロードされ、スタイルは実装されません。

効率的な方法がありますか効率的な方法でこれを行うことができます。

は、これが私のEDIT：2

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

今病気に取得する場合画面解像度は800pxと言われていますので、600pxとなり、divsは250pxとなりますので、2つしか追加できませんので、左から200pxを差し引きたいと思います。したがって、右に100pxが表示されないようにするには、私のウェブサイトのページ幅を700pxに調整します。

私はPHPで行うことができますが、すべてのものを取得する方法は、同じページで同時に行われるのですか？

あなたは#LeftContent

として#SideBar 左側の領域として#Wrapper 右の一つとして呼び出すことができます全体の面積は、私はよく物事を説明している願っています。だから誰かが私を助けてくれれば助かります:)

Answer 1

私はあなたの問題を理解しているかどうかわかりませんが、これは私が持っているものです。画面の幅を取得し、クラスを設定するつもりなら、そのようにするのをやめてください。これはうまくやっていないし、将来的にページレイアウトを変更する必要があるならば、それらのすべてのエコーを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 

であり、あなたはあなたのアプローチを変更することを検討すべきです。

幸運:)

---

TRY THIS：（私はあなたが望むものであると信じて）あなたは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> 

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

はそれを試してみる:)

Answer 2

jQueryのようなjavascriptのlibを使うことができます。代わりに：

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 
}); 

Documentation of $.get() jQuery function。

Answer 3

を私はようやく自分の質問:)

<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であるためのソリューションを取得します。 ..