让屏幕宽度为JavaScript变量，并通过AJAX发送到PHP页面，以避免页面加载 [英] getting screen width into javascript variable and sending it through ajax to a php page to avoid page load

问题描述

这是 JS 来检测屏幕分辨率在我的网页命名 index.html的，并把它发送到PHP ，这样的数值可以使用retrived $ _ GET ： -

This is the JS to detect the screen resolution on my page naming index.html and sending it to php, so that the values can be retrived using $_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 的内容： -

This is the content of my PHP file naming process.php:-

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

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

现在让屏幕尺寸后，我想要显示的的index.php 。

Now after getting the screen size i want to display the index.php.

注意这些步骤，因为懂得我想要的东西的工作方式： - 的

NOTE THESE STEPS, AS TO UNDERSTAND THE WAY I WANT THINGS TO WORK:-

1. 在页面加载启动
2. 在Javascript的检测可用屏幕宽度。
3. 在它传递到PHP文件和PHP变量得到了屏幕可用屏幕宽度。
4. 然后页面开始使用了PHP变量（指页面的宽度正在使用PHP的变量设置）显示

在整个过程中，的index.php 不应该被重新加载。 那么，如何可以做到？

In the whole process the index.php should not be reloaded. So, How it can be done?

编辑：

由于 JS 传递价值，它被加载PHP文件，我想是让屏幕分辨率并设置相应的网站页面宽度。但是，如果 JS 将数据发送到PHP文件，如果有的话，我们得到它通过AJAX，它可能会发生，我的网站获得满载和风格不会因为实施它已经被加载的所有的东西阿贾克斯工作之前。

As the JS passes the value to the php file it gets loaded, what i want is to get the screen resolution and accordingly set the website page width. But if JS send the data to php file and if at all we get it through ajax, it may can happen that my website get fully loaded and the style would not be implemented because it has already been loaded all the stuffs before the ajax work.

有没有这足以或者我们可以做的方式这一个高效的，它成为有效的任何方法。

Is there any method which is efficient enough or we can do this one in a way that it become efficient.

这是我的编辑：2

要更清楚我会真正解释我想实现通过下面的图片： -

To be more clear i'll actually explain what i want to achieve using the following image:-

现在，如果生病让屏幕分辨率说 800px 那么我就知道我要扣除 200像素左侧从它，所以它会成为 600px的和我的的div 是 250像素我就可以只有两个补充。因此，为了避免可见 100像素右我会调整我的网站页面宽度 700像素。

Now if ill get the screen resolution say 800px then i know that i want to deduct 200px of left side from it, so it will become 600px and as my divs are 250px i'll be able to add only two. Therefore, to avoid showing that 100px in right i'll adjust my website page width to 700px.

东西，我可以在PHP做，但如何让所有的东西得到的同一时间同一页上做了什么？

Things i can do in php, but how to get all things get done at same time on same page?

的整个区域，您可以为呼叫 #wrapper中 右一为 #SideBar 左侧区域为 #LeftContent

希望我已经解释的事情办好。所以，请，如果有人能帮助我做要紧的：）

Hope i have explained things well. So please if someone can help me doing the needful :)

推荐答案

我不知道如果我理解你的问题，但是这是我得到的答案：如果你只打算让屏幕的宽度，然后设置类我disencourage你这样做的。这不是很好的和未来，如果你需要改变你的页面布局，你会通过让所有那些注定回响在PHP中，你会避免很多重定向（的index.html的 - > process.php - >的index.php ）。

I'm not sure if I understood your problem but this is what I've got: if you only intend to get the screen width and then set the class I disencourage you to do it that way. It's not nice and in the future if you need to change your page layout you'll be doomed by having all those echo in php and you'll avoid a lot of redirects (index.html -> process.php -> index.php).

你的榜样，你能做到这一切在Javascript。

By your example you can do it all in Javascript.

这是例子是使用jQuery

This is example is with JQuery

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

如果这个想法是非常不同的屏幕分辨率（从个人电脑到智能手机），你应该考虑改变你的方法。

If the idea is for very different screen resolutions (from PCs to SmartPhones), you should consider changing your approach.

祝你好运：）

试试这个：（我认为这是你想要的）

TRY THIS: (I believe is what you want)

您可以只用JS和CSS做到这一点。 下面是一个例子：

You can do this with just JS and CSS. Here is an example:

设置样式为您的身体保证金及测试DIV：

set the style for your body margin and your test div:

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

然后添加这个脚本：

then add this script:

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

和与这个网站进行测试：

and test it with this 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>

它可以在不同的分辨率。

It works in different resolutions.

试试看吧：）

这篇关于让屏幕宽度为JavaScript变量，并通过AJAX发送到PHP页面，以避免页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！