Медиа-запрос неактивен при использовании начальной загрузки с yii2 - PullRequest
0 голосов
/ 29 июня 2018

давайте посмотрим на следующие 2 картинки, пожалуйста. Первый покажет мой сайт на большом экране, второй на смартфоне: enter image description here

enter image description here

Мне нужно одиннадцать (!!) раз коснуться экрана смартфона, чтобы получить всю информацию. Почему mediaQuery загрузчика не выполняет свою работу? Я хочу сжать иллюстрацию таблицы на смартфоне, но не на большом экране. Есть идеи, как добиться своего намерения? Вот файл макета:

<?php

use yii\helpers\Html;
use common\classes\AssetBundle;
?>
<?php
AssetBundle::register($this);
?>
<?php $this->beginPage() ?>
<!Doctype html> <!-- Definition des doctype-Modus -->
<html> <!-- Definition des Stammverzeichnises -->
    <head> <!-- Definition des Kopfbereiches -->
        <meta charset="utf-8"> <!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title><?= Html::encode($this->title) ?></title>
        <style>
            body{
                background-color: #D8D8D8 !important;
            }
        </style>
        <?php $this->head() ?>
    </head>
    <body>
        <?php $this->beginBody() ?>
        <?= $content ?>
        <?php $this->endBody() ?>
    </body>
</html>
<?php $this->endPage() ?>

Вот класс активов:

<?php

namespace common\classes;

class AssetBundle extends \yii\web\AssetBundle {

    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
            //'css/font-awesome.min.css',
            //'css/lightbox.min.css'
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'yii\bootstrap\BootstrapPluginAsset',
    ];

    public function init() {
        parent::init();
        $this->publishOptions['beforeCopy'] = function ($from, $to) {
            return preg_match('%(/|\\\\)(fonts|css)%', $from);
        };
    }
}

Перефразируя вопрос: Также включение <div class="table-responsive"></div> не решит проблему. Вот мой GridView. Больше нет другого тега div, но этот!

<div class="table-responsive">
    <?=
    GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => $gridColumn,
        'tableOptions' => ['class' => 'table-responsive'],
        'responsiveWrap' => true,
        'panel' => [
            'type' => GridView::TYPE_PRIMARY,
            'before' => Html::a('<i class="glyphicon glyphicon-plus"></i> zur Übersicht', ['/immobilien/preview'], ['class' => 'btn btn-info']),
            'after' => Html::a('<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>Termin vereinbaren', ['/immobilien/termin'], ['class' => 'btn btn-success']),
            'heading' => '<span class="glyphicon glyphicon-book"></span>  ' . Html::encode($this->title),
            'class' => 'danger'
        ],
        'toolbar' => [
            '{export}',
            '{toggleData}'
        ],
    ]);
    ?>
</div>

Вот еще два скриншота. Первый кажется приемлемым. Минимизация экрана немного уничтожит все. Я действительно разочарован использованием yii2 / bootstrap. Этого не должно быть!

  'responsiveWrap' => true,

тоже не решит проблему!

enter image description here

enter image description here

Ответы [ 2 ]

0 голосов
/ 02 июля 2018

В большинстве случаев экран смартфона слишком мал для отображения более одного или двух столбцов.

Мое решение состоит в том, чтобы иметь другую компоновку для смартфонов:

$isMobile = (\Yii::$app->devicedetect->isMobile() and !(\Yii::$app->devicedetect->isTablet()));
if ($isMobile) {
    $columns = "column1,column2";    
}
else {
    $columns = "column1,column2,column3,column4,column5";
}

$columns = explode(",", $columns);
..

Devicedetect: https://github.com/alexandernst/yii2-device-detect

0 голосов
/ 29 июня 2018

В документации по начальной загрузке вы можете найти, что

Адаптивные таблицы. Создайте адаптивные таблицы, обернув любой .table в .table-отзывчивый, чтобы заставить их прокручивать горизонтально на небольших устройствах (до 768 пикселей). При просмотре чего-либо более 768 пикселей в ширину вы не увидит никакой разницы в этих таблицах.

https://getbootstrap.com/docs/3.3/css/#tables-responsive

Так что, по вашему мнению, напишите это

<div class="table-responsive">
// GridView here
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...