对于响应式设计,如何为移动用户添加不同的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的媒体查询,并为每种类型的标头添加一个类,如下所示:

<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将被隐藏.

希望能帮助到你!