Как заставить 768 × 1024 просмотра экрана в 360 × 640 просмотра в iPad

Question

У меня проблема с мобильным отзывчивым просмотром, если приложения запущены на планшете или iPad, экран будет соответствовать экрану iPad, и я хочу, чтобы этот экран (iPad) уменьшился (360)× 640).Кто-нибудь есть какие-либо идеи, как это сделать?

Этот вид экрана:

на это:

Answer 1

Есть способ сделать это да.

Теория состоит в том, что вы устанавливаете переменную --ion-grid-width на максимальную ширину значения, которую вы хотите, чтобы приложение отображало, а затем оборачиваете все содержимое страницы.в ion-grid.

Как вы можете видеть из моего фрагмента ниже, мое решение было вдохновлено статьей на официальном блоге Ionic , но я думаю, что он был нацелен на Ionic 3, поэтому у меня былочтобы сделать некоторые изменения.

Я пытаюсь вспомнить из приложения, в котором я реализовал это в начале года.Вот соответствующие фрагменты:

Я поместил этот файл в variables.scss, но подойдет любой файл sass верхнего уровня:

/** RTP - Custom Grid Breakpoints For Desktop **/
// Inspired By https://blog.ionicframework.com/tips-tricks-for-ionic-on-desktop/
$custom-grid-max-width: 768px;

ion-grid {
    --ion-grid-width: #{$custom-grid-max-width};
}

ion-header ion-toolbar[fixed],
ion-footer ion-toolbar[fixed] {
  --padding-end: calc((100% - #{$custom-grid-max-width}) / 2);
  --padding-start: calc((100% - #{$custom-grid-max-width}) / 2);
}
/** END RTP - Custom Grid Breakpoints For Desktop **/

Я ограничил максимальную ширину до 768px;, вы можете изменить его на предпочитаемое значение.

Затем для страниц вы сделаете что-то вроде этого:

<ion-header>
  <ion-toolbar fixed>
    <ion-title text-center class="logo-holder">
      Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid fixed>
    Normal Ionic content in here.
  </ion-grid>
</ion-content>

<ion-footer>
  <ion-toolbar fixed>
    <ion-buttons slot="primary">
      <ion-button color="primary" fill="solid" size="large" href="/add">
        <ion-icon slot="start" name="play"></ion-icon>
        Add
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

Таким образом, вы увидите, что панели инструментов имеют атрибут fixed.Я также поместил этот fixed на ion-grid упаковщик.Вам придется поэкспериментировать, если это требуется, если я был просто сбит с толку n00b (это было мое первое приложение).

Это ограничивает максимальный размер планшета:

Из моих красных линий видно, что фон и контейнер панели инструментов по-прежнему расширяются на всю ширину, но содержимое ограничено до максимальной ширины 768 пикселей;