Question

请看以下两张图片。第一个将在大屏幕上显示我的网站，第二个将在智能手机上显示：

我必须触摸智能手机屏幕上的十一（!!）次才能获取所有信息。 Bootstrap的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>

这里是另外两个Screensots。第一个似乎可以接受。最小化屏幕会破坏一切。我真的对使用yii2 / bootstrap感到沮丧。这不应该发生！

  'responsiveWrap' => true,

也不会解决问题！

Answer 1

在引导程序文档中，您可以找到

响应表通过将任何.table包装在 .table-response使它们在小型设备上水平滚动（768px以下）。在大于768像素宽的屏幕上查看时，这些表不会有任何区别。

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

所以在您看来，写这个

<div class="table-responsive">
// GridView here
</div>

Answer 2

在大多数情况下，智能手机的屏幕太小，无法显示一两列以上。

我的解决方案是为智能手机设置不同的布局：

$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);
..

设备检测：https://github.com/alexandernst/yii2-device-detect

使用yii2引导程序似乎无法激活媒体查询

2 个答案: