javascript - 根据浏览器屏幕大小和媒体查询执行 php 代码

Question

我有两个 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>

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
}