將屏幕寬度變成javascript變量並通過ajax發送到php頁面以避免頁面加載

Question

這是JS來檢測我的頁面上的屏幕分辨率，命名爲index.html並將其發送到php，以便可以使用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文件，我想要的是讓屏幕分辨率並設置相應的網站頁面寬度。但是，如果JS將數據發送到PHP文件，如果在所有我們得到它通過Ajax，它可能會發生，我的網站獲得全負荷並且風格不會實現，因爲它已經在阿賈克斯工作之前加載所有的東西。

是否有這足夠有效的任何方法或我們可以做的方式，它成爲有效的這一個。

這是我的編輯：2

更清楚，我實際上將解釋什麼是我想用下圖來實現： -

現在，如果生病得到屏幕分辨率說800px那麼我就知道我要扣除左側從它的200px，因此，它將成爲600px和我divs是250px我能只有兩個補充。因此，爲了避免在右邊顯示100px，我會將我的網頁寬度調整爲700px。

的事情，我可以用PHP做的，可是如何才能讓所有的東西在獲得同一時間同一頁上做了什麼？

整個區域，您可以撥打爲#Wrapper 右一爲#SideBar 左側區域爲#LeftContent

希望我已經解釋的事情做好。所以，請，如果有人能幫助我做要緊的:)

Answer 1

我不知道如果我理解你的問題，但是這是我的了：如果你只打算讓屏幕的寬度，然後設置我disencourage你這樣做的類。這不是漂亮，將來如果需要更改頁面佈局，你會通過使所有那些註定迴響在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 

如果這個想法是非常不同的屏幕分辨率（從個人電腦到智能手機），你應該考慮改變你的方法。

祝你好運:)

---

試試這個：（我相信這是你想要的）

你可以只用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> 

，並與這個網站進行測試：

<!-- 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

您可以使用JavaScript像jQuery庫。相反的：

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按照問題由我問。 ..