画面サイズに応じてphpファイルをインクルード

Question

私はデスクトップヘッダーとモバイルヘッダーの2種類のヘッダーメニューを持つレスポンシブウェブデザインに取り組んでいます[参照してください：異なる]。 画面の解像度に応じて、ヘッダーファイルが呼び出されます。 私のコードは次のとおりです。このコードは正常に動作しますが、私が気づいたことはファイルの両方がロードされていることです

<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> 

、ファイルは/隠されている画面サイズに応じて示します。 私は、画面サイズに応じて1つのPHPファイルのみをロード/実行するコードが必要です。

Answer 1

ページが既にサーバーから読み込まれているため、CSSでこれを行うことはできません。それは要素を非表示にしているためです。

ヘッダーをレスポンシブにしてこれを処理しないのはなぜですか？