根据浏览器屏幕大小和媒体查询执行 php 代码 - Execute php code depending on browser screen size and media-queries

我有两个php代码块（下图），我想根据浏览器屏幕大小执行，在foreach循环中，例如，第一个代码包含一个css类桌面显示，当屏幕尺寸等于或大于1024px时，代码应该执行并输出结果。在第二个 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>

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
}