0

这是JS在我的页面命名上检测屏幕分辨率index.html并将其发送到 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 获取它，则可能会发生我的网站已完全加载并且样式不会被实现，因为它已经在 ajax 工作之前加载了所有内容。

有没有足够有效的方法，或者我们可以以一种有效的方式来做这个。

这是我的编辑：2

为了更清楚，我将使用下图解释我想要实现的目标：-

其实我想实现这样的事情

现在如果我得到屏幕分辨率说800px然后我知道我想从中扣除200px左​​侧，所以它会变成600px我divs现在250px只能添加两个。因此，为了避免显示100px在右侧，我将我的网站页面宽度调整为700px.

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

您可以将整个区域称为 #Wrapper Right One 作为 #SideBar Left Area #LeftContent

希望我已经很好地解释了事情。所以请如果有人可以帮助我做必要的事情:)

4

3 回答 3

4

我不确定我是否理解您的问题，但这就是我所得到的：如果您只想获取屏幕宽度然后设置类，我不鼓励您这样做。这不好，将来如果您需要更改页面布局，您将注定要在 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 来做到这一点。这是一个例子：

为你的 body margin 和你的测试 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>

它适用于不同的分辨率。

试试看 ：）

于 2012-04-04T10:39:32.643 回答
1

我终于得到了我自己问题的解决方案:)

<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我提出的问题...

于 2012-04-04T12:50:24.783 回答
0

您可以使用像 jQuery 这样的 javascript 库。代替：

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 函数的文档。

于 2012-04-04T10:16:27.657 回答