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

Question

I want to change my header.php file for mobile devices. I've tried this javascript solution but it doesn't write the php file. How can I fix this?

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

Thanks

Answer 1

Why do you want to import different files? You could use media queries with css and add a class to each type of header like this:

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

And in CSS you just hide it/show it with media queries:

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

This means that your .header-mobile div is going to be hidden, unless your window size is 600px or less, in that case, your .header is going to be hidden.

Hope it helps!