javascript - 对于响应式设计，如何为移动用户包含不同的 header.php 文件？

Question

我想更改移动设备的 header.php 文件。我已经尝试过这个 javascript 解决方案，但它不写入 php 文件。我该如何解决这个问题？

<script language=javascript>
if (screen.width >= 720 ) 
     $('#header').load('header.php');
else (
     $('#header').load('header-mobile.php');
)
</script>
<div id="header"></div>

谢谢

Answer 1

为什么要导入不同的文件？您可以将媒体查询与 css 结合使用，并向每种类型的 header 添加一个类，如下所示:

<div class="mobile-header">
</div>
<div class="header">
</div>

在 CSS 中，您只需隐藏它/使用媒体查询显示它:

.header-mobile { 
    display: none;
}
@media (max-width: 600px) {
    .header {
        display: none;
    }
    .header-mobile {
        display: block;
    }
}

这意味着您的 .header-mobile div 将被隐藏，除非您的窗口大小为 600px 或更小，在这种情况下，您的 .header 将被隐藏。

希望对你有帮助!