давайте посмотрим на следующие 2 картинки, пожалуйста. Первый покажет мой сайт на большом экране, второй на смартфоне:
![enter image description here](https://i.stack.imgur.com/a73Sv.jpg)
![enter image description here](https://i.stack.imgur.com/CPote.jpg)
Мне нужно одиннадцать (!!) раз коснуться экрана смартфона, чтобы получить всю информацию. Почему 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](https://i.stack.imgur.com/Br5Uk.jpg)