将屏幕宽度变成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按照问题由我问。 ..