Include PHP-Dateien je nach Bildschirmgröße

Question

Ich arbeite an einem responsiven Web-Design, das 2 verschiedene Header-Menüs hat, dh Desktop-Header und mobile Header. [Bitte sehen: Ich kann nicht reagieren wie der Inhalt der Menüs anders]. Abhängig von der Bildschirmauflösung wird die Header-Datei aufgerufen. Mein Code ist:

<style type="text/css"> 
@media only screen and (min-width: 768px) { 
    /* tablets and desktop */ 
    .mobile { 
     display: none 
    } 
} 

@media only screen and (max-width: 767px) { 
    /* phones */ 
    .desktop { 
     display: none 
    } 
} 

@media only screen and (max-width: 767px) and (orientation: portrait) { 
    /* portrait phones */ 
    .desktop { 
     display: none 
    } 
} 
</style> 
<div class="mobile"> 
    <?php 


    include_once(WWW . 'inc/layout/mobile_header.php'); 

    ?> 
</div> 
<div class="desktop"> 
    <?php 
{ 
    include_once(WWW . 'inc/layout/desktop_header.php'); 
} 

?> 

</div> 

Dieser Code funktioniert prima, aber was ich bemerkt habe ist, dass sowohl die Dateien geladen sind, werden die Dateien versteckt/angezeigt abhängig von der Bildschirmgröße. Ich möchte einen Code, in dem je nach Bildschirmgröße nur eine PHP-Datei geladen/ausgeführt wird.

Answer 1

Dies ist mit CSS nicht möglich, da die Seite bereits vom Server geladen wurde und die Elemente dann ausgeblendet werden.

Warum nicht einfach Ihre Kopfzeile so gestalten, dass sie reagiert und sich nicht damit befasst?