如何基于屏幕分辨率触发html / php文件

Question

我正在开发一个wordpress响应式网站。 但现在我面临着菜单问题。 请查看下面的图片以进行导航。 在顶部的黑色栏“检查我们的小镇”上将具有下拉菜单，而在蓝色栏上“ 关于我们”也具有下拉菜单

所以我想当屏幕分辨率在800以下时，顶层菜单和徽标部分会有所不同。 我知道一种方法，例如我可以制作单独的标题部分，然后通过CSS隐藏它并通过CSS媒体查询调用它。 为此，我需要始终将这些代码保留在正文中。 但我不希望它只在需要时才在体内进行编码。

说如果使顶部区域分开的html / php文件，如果我可以在屏幕分辨率为800/480等时调用它，那我会猜想。 我可以通过php / js实现，但我不知道如何。

看到图像有两个导航部分，一个是黑色区域，另一个是蓝色区域。 当我将波纹管800像素时，它将是一个下拉菜单中的所有菜单。

屏幕分辨率低于800像素时，请参见下面的波纹管菜单，我要使用此类型

Answer 1

我不建议Ajax加载2个导航。 它添加了一个额外的http请求，这比仅向桌面和移动设备提供所需的一点额外标记要慢。

我认为使用媒体查询是最好的方法。

这就是我想您要尝试做的事情： http : //jsfiddle.net/krismeister/CNr5y/

相关部分是@media screen and (min-width:800px){

Answer 2

我认为实现此目标的唯一方法是使用Ajax。 将空白页发送给客户端，检查窗口大小，并通过ajax请求内容，并以屏幕宽度作为参数。

Answer 3

我对jquery和json不太满意。

$(function() {
    $.post('some_script.php', { width: 800px }, function(json) {
        if(json.outcome == 'success') {
           header-800px.php;
        } else {
            header.php;
        }
    },'json');
});

参考： 使用PHP获取屏幕分辨率