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
}

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

1 个答案: