如何在iPad中将768×1024屏幕视图强制为360×640视图 [英] How to force 768×1024 screen view to 360×640 view in iPad

问题描述

我对移动响应视图有问题，如果应用程序在平板电脑或iPad上运行，则屏幕将适合iPad的屏幕，并且我想将此屏幕视图(iPad)强制为较小的屏幕视图(360×640).有人知道怎么做吗?

此屏幕视图:

对此:

解决方案

有一种方法可以做到这一点.

理论是，您将-ion-grid-width 变量设置为希望应用程序显示的最大宽度，然后将整个页面内容包装为 ion-grid .

从下面的代码段中可以看到，我的解决方案的灵感来自

从我的红线中可以看到，背景和工具栏容器仍然延伸全宽，但是内容被限制为最大768px；

I have a problem with mobile responsive view, if the apps is running in an tablet or iPad, the screen will be fit the screen of iPad, and I want to force this screen view (iPad) to smaller screen view (360×640). Anyone have any idea how to do it?

This screen view:

to this:

解决方案

There is a way to do this yes.

The theory is that you set the --ion-grid-width variable to the max value width that you want the app to display in, and then wrap your entire page contents in an ion-grid.

As you can see from my snippet below, my solution was inspired by an article on the official Ionic blog but I think it was targeting Ionic 3 so I had to make some tweaks.

I'm trying to remember from an app that I implemented this in at the start of the year. Here are the relevant snippets:

I put this one in variables.scss but any top-level sass file will do:

/** 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 **/

I've clamped my max-width to 768px;, you can change it to your preferred value.

Then for the pages, you do something like this:

<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>

So you can see the toolbars have the fixed attribute. I have also put this fixed on the ion-grid wrapper as well. You will have to experiment if that's required of if I was just a confused n00b (this was my first app).

This clamps it a max of a tablet-ish size:

You can see from my red lines that the background and the toolbar container still extend full width but the content is clamped to a max width of 768px;

这篇关于如何在iPad中将768×1024屏幕视图强制为360×640视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！