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

问题描述：

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

我想更改移动设备的header.php文件。我试过这个javascript解决方案，但它没有编写php文件。我该如何解决这个问题？ p>

 ＆lt; script language = javascript＆gt; 
if（screen.width＆gt; = 720）
 $（'＃header'）。load（  'header.php'）; 
else（
 $（'＃header'）。load（'header-mobile.php'）; 
）
＆lt; / script＆gt; 
＆lt; div id =“header”＆gt  ;＆lt; / div＆gt; 
  code>  pre> 
 
 谢谢 p> 
  div>

答

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!

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

相关推荐