Question

您好我正在使用jQuery根据浏览器宽度加载变量php布局。

function setLocation(url) {
   if (window.location.href.indexOf(url) === -1)
      window.location = url;
}

function reloadPage(width) {
    width = parseInt(width);
    if (width < 701) {
        setLocation("yournarrowpage.php");
    } else if (width < 900) {
        setLocation("yourmediumpage.php");
    } else {
        setLocation("yourwidepage.php");
    }
}

$(function() {
   reloadPage($(this).width());
   $(window).resize(function() {
       reloadPage($(this).width());
   });
});

是否可以用php完成这个？

如果是，怎么样？请帮忙。

当我只需使用CSS重新排列布局时，为什么要这样做呢？

我不想使用CSS属性#div { display:none }，因为问题是我的布局加载了很多图像，javascript和小部件。

我甚至尝试了响应式布局，但不幸的是，在小屏幕上几乎看不到某些图像细节。

使用css属性display:none，仍会加载未显示的内容，浪费大量带宽。让我们说移动浏览器加载1.5 MB的网站，然后隐藏1.2 MB的它？那可能不是一个好主意。

对于较小的浏览器，这些小部件没有任何意义，因此我想加载更轻的版本。

这就是我的想法。如果我错了，请随时纠正我，因为我在编程方面仍然是新手而且还处于学习阶段。

Answer 1

在PHP中尝试此操作的问题在于，您无法通过Web服务器告知客户端宽度，这意味着您必须深入了解request headers。

有一个图书馆可以帮助device detection using PHP on Google Code。

最后一两句警告。您需要使此脚本保持最新，以便它继续工作。它用于告诉设备是什么的方法属于“浏览器嗅探”的标志，它依赖于通过某些标头发送的浏览器，这些标题可能会在以后的版本/新浏览器中发生变化。此外，大多数情况下，您根本不想强迫移动用户查看您网站的移动版本，因此如果您决定以这种方式实施，请让人们选择在他们的手机上查看普通网站。

Answer 2

结合CSS媒体查询和javascript，以防止加载您不想加载的较大项目/区域...

if ($('window').width() > 1000) {

 // load your full functions and stylesheet 

}

if ($('window').width() < 1000) {

 // load your narrow functions and stylesheet 

}

我最近在一个类似于此的方法中组合了css媒体查询，然后添加了动画以帮助减轻转换的痛苦......这非常好。

Answer 3

PHP只是将文本输出到客户端。它完全不了解客户端没有告诉客户的任何信息。

我说客户端，因为无法保证向您的PHP脚本发起请求的软件甚至是浏览器。

您排除了CSS，但老实说，如果您不想使用javascript，那么它是您拥有的唯一选择。 CSS3中的选择器非常强大，您可以使同一页面对于不同的浏览器宽度看起来完全不同。

php根据浏览器宽度加载变量php文件

3 个答案: