ブラウザの画面サイズとメディアクエリに応じてPHPコードを実行

Question

私はブラウザの画面サイズに応じて実行したいコードの2つのphpブロックを持っています（たとえば、最初のコードには次のコードが含まれています）。 cssクラスのデスクトップディスプレイでは、画面サイズが1024px以上の場合にコードを実行して結果を出力する必要があります。 2番目のPHPコードブロックでは、画面サイズが768〜1023pxのときにコードを実行する必要があります。どのようにそれを行うか、メディアクエリーに基づいてPHPコードを隠して表示する方法を理解することはできません。これらのコードブロックをまとめると、コードは単純に実行されません。同様の問題を以前に解決した場合は、共有してください。

<style> 

.desktop-display { 
    display: none; 
} 
.ipad-portrait { 
    display: none; 
} 

.ipad-landscape { 
    display: none; 
} 

.smartphone-display { 
    display: none; 
} 

@media screen and (min-width: 1024px){ 
.desktop-display { 
     display: block; 
    } 
} 

@media screen and (min-width: 768px) and (max-width: 1023px){ 
.ipad-landscape { 
     display: block; 
    } 
} 
</style> 


<?php if ($index == 0 || $index == 2) { ?> 
<div style="" class="cne-package the-feed-item desktop-display"> 
    <div class="cne-container package package-paired"> 
     <div class="package__main"> 
      <a href="<?php echo $this->url($video->getProperties(), 'media_video_view'); ?>" style="" class="package__title"><?php echo $video->title; ?></a> 
      <div class="package__secondary"> 
       <div class="package__secondary__inner"> 
        <div class="package__secondary__inner__cell"> 
         <?php } elseif ($index == 1 || $index == 3) { ?> 
         <div class="package__image--secondary" style="width: 230px; height: 230px; background-image: url(<?php echo $video->getPoster('medium'); ?>);"> 
          <a href="<?php echo $this->url($video->getProperties(), 'media_video_view'); ?>" style=""> 
           <div data-label="<?php echo $video->duration; ?>" class="thumbnail-action-button icon-play the-thumnbail-action-button"></div> 
          </a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 




<?php if ($index == 0 || $index == 2) { ?> 
<div style="" class="cne-package the-feed-item ipad-landscape"> 
    <div class="cne-container package package-paired"> 
     <div class="package__main"> 
      <a href="<?php echo $this->url($video->getProperties(), 'media_video_view'); ?>" style="" class="package__title"><?php echo $video->title; ?></a> 
      <div class="package__secondary"> 
       <div class="package__secondary__inner"> 
        <div class="package__secondary__inner__cell"> 
         <?php } elseif ($index == 1 || $index == 3) { ?> 
         <div class="package__image--secondary" style="width: 230px; height: 230px; background-image: url(<?php echo $video->getPoster('medium'); ?>);"> 
          <a href="<?php echo $this->url($video->getProperties(), 'media_video_view'); ?>" style=""> 
           <div data-label="<?php echo $video->duration; ?>" class="thumbnail-action-button icon-play the-thumnbail-action-button"></div> 
          </a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

PHPは、サーバーにデータを送信するためにJavaScriptを必要とする（クライアント側のデータである）、それを画面の大きさを与えるために、サーバ側で実行されます。

アダプティブウェブサイトがあなたのアプローチであり、このようにしたい場合は、別のPHPスクリプトを保存してください。

ファイル構造

+---> main.php 
+---> mobile_view.php 
+---> desktop.php 

とmain.phpはこのロジックが含まれてみましょう： -

var $dimensions = $_GET['dimensions']; 
if(dimensions[0] < 1024) { 
// redirect with desktop.php 
} else { 
// redirect with mobile.php 
}