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

Question

這是用於在我的頁面命名index.html上檢測屏幕分辨率並將其發送到 php 的JS ，以便可以使用$_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 :-

<?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 獲取它，則可能會發生我的網站完全加載並且樣式無法實現的情況，因為它已經在 ajax 工作之前加載了所有內容。

有沒有足夠有效的方法，或者我們可以以一種變得有效的方式來做到這一點。

這是我的編輯：2

更清楚地說，我將使用下圖解釋我想要實現的目標：-

現在如果我得到屏幕分辨率說800px那么我知道我想從它的左側扣除200px ，所以它將變成600px並且因為我的divs是250px我將只能添加兩個。 因此，為了避免在右側顯示100px ，我會將我的網站頁面寬度調整為700px 。

我可以在 php 中做的事情，但是如何在同一頁面上同時完成所有事情？

您可以將整個區域稱為#Wrapper Right One 作為#SideBar Left Area 作為#LeftContent

希望我已經解釋清楚了。 所以如果有人可以幫助我做必要的事情，請:)

Answer 1

我不確定我是否理解你的問題，但這就是我所知道的：如果你只想獲得屏幕寬度然后設置 class 我不鼓勵你那樣做。 這不是很好，將來如果你需要改變你的頁面布局，你將注定要在 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>

它適用於不同的分辨率。

試試看：）

Answer 2

我終於得到了我自己問題的解決方案:)

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

Answer 3

您可以使用 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
});

$.get() jQuery function 的文檔。