ionic - 键盘打开时调整背景图像大小

Question

我在 ioniv-view 标记类中有一个背景图像，当在此页面上打开键盘时，图像调整大小.. 代码：

.bgImage {
background: url('../img/LoginBackground.png')  no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;

}

我该如何解决？

Answer 1

我在主页上放置了一个带有完整 img 背景的搜索栏，以检查打开键盘时会发生什么。这里一切正常，图像保持在同一个位置，键盘就在它上面。这是我的工作示例，用它来使你的工作。

<ion-view view-title="The title">
    <div class="bar bar-subheader item-input-inset bar-light">
        <div class="item-input-wrapper">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="search" ng-model="query" placeholder="Search">
            <a class="clear" ng-click="query = '' ">
                <span class="icon ion-close-round"></span>
            </a>
        </div>
    </div>
    <ion-content class="splash" has-bouncing="false" start-y="55" padding="true" has-tabs="true" has-header="true">
    </ion-content>
</ion-view>

因此，splash 类是放置完整 img 背景的类。这是它的css

.splash {
    background: url(../img/Home.png) no-repeat;
    background-position: center;
    background-size: cover;
}

Answer 2

问题是由于打开键盘时 WebView 被调整大小造成的。这就是为什么即使您将图像居中，它仍然会调整大小并变小。此行为由cordova-plugin-keyboard 处理，只能在 iOS 上切换，这是 Android 设备的默认设置。在文档中说明了以下内容：

WebView 缩小而不是视口缩小和页面 可滚动的。这适用于将其元素相对定位的应用程序 到 WebView 的底部。这是默认行为 Android，并且在构建应用程序时很有意义，而不是 网页。

您可以在plugin documentation 中找到更多相关信息。它可能对其他人有效的原因可能是因为他们要么在浏览器中进行测试，要么在 iOS 上进行测试，两者的行为不同。

我没有测试过以下任何建议，但您可以尝试查看this suggestion，他们建议将背景应用于.pane 类或使用background-size: 280% auto;，尽管我不确定为什么会这样。

还有一个similar question asked about Ionic 2，其中一个答案是检测设备的高度并将其用作背景尺寸，以便它忽略 WebView 的高度。我建议你试试这样的方法。

Answer 3

我解决了这个问题，将 background 和 background-size: cover 定义放在 ion-view 而不是 ion-content 中。

Answer 4

@jcarballo 将图像大小设置为覆盖不是最佳解决方案，在背景具有渐变或对象图像的情况下。即使有封面，您也会清楚地注意到图像的大小调整。

如果您仍然有这个问题，我可以通过以下方式设置背景来克服它：

  ion-view.pane::before {
      content: '';
      position: absolute;
      height: 100%;
      width: 100%;
      background: url(...);
      background-position: top right;
      background-repeat: no-repeat;
      background-size: 280%;
}

这里的关键部分是：

1. 容器大小 100%
2. bg 大小 280%
3. bg 定位到顶角

我不完全清楚为什么会这样，但它确实有效，而且它是我能得到的最酷的东西，类似于封面背景而无需键盘轻推大小。

Answer 5

我在遇到相同问题时找到的替代答案，但由于其他原因对我没有真正的帮助：

将应用设置为全屏

你可能不希望应用像我一样全屏运行，所以这可能不是一个有效的解决方案。

更改 AndroidManifest.xml 文件

如果您尝试过将android:windowSoftInputMode="adjustResize"更改为android:windowSoftInputMode="adjustPan"的解决方案。您可能会发现它确实有效，但是通过更改它（至少根据我的经验）它阻止了应用程序在输入文本时调整大小/移动到该字段。

一个更清晰的例子是 - 您有一个包含多个字段的表单，单击该字段，它会自动将字段滚动/平移到页面顶部并打开键盘，这样您就可以看到什么您正在输入，但更改后它会停止工作。

我尝试过的一些有效修复：

// HTML
<div class="login-bg" ng-style="bgStyle"></div>

// Controller
$scope.bgStyle = { "min-height" : window.innerHeight + "px" };

或

// HTML
<div class="login-bg" style="min-height:{{bgStyle}}"></div>

// Controller
$scope.bgStyle = window.innerHeight + "px";

或

// HTML
<div class="login-bg" {{bgStyle}}></div>

// Controller
$scope.bgStyle = "style='min-height:" + window.innerHeight + "px'";

Answer 6

Cordova ionic-webview 4.1.1

global.scss：

ion-app {
    background-color: transparent !important;
    --background: none;
    background: url(/assets/img/file_name.jpg) no-repeat 0 0;
    background-size: 128% 105%;
    align-items: flex-start;
    background-position: -46px 0;

    ion-router-outlet, ion-modal {
       ion-content {
          background-color: transparent !important;
          --background: none;
       }
    }
}

app.component.ts：

window.addEventListener('native.keyboardshow', (e) => {
  const ionAppEl = <HTMLElement>(document.getElementsByTagName('ion-split-pane')[0]);
  if ( ionAppEl ) {
    ionAppEl.setAttribute('keyboard', 'true');
    const active: any = document.activeElement;
    if ( active ) {
      if ( (this.platform.is('android') || this.platform.is('ios')) && e['keyboardHeight'] ) {
        ionAppEl.setAttribute('style', 'height: calc(100% - ' + e['keyboardHeight'] + 'px);');
      }
      if ( active.scrollIntoViewIfNeeded ) {
        active.scrollIntoViewIfNeeded(true); // ensure input focus
      }
    }
  }
});

window.addEventListener('keyboardWillHide', (e) => {
  const ionAppEl = <HTMLElement>(document.getElementsByTagName('ion-split-pane')[0]);
  if ( ionAppEl && (this.platform.is('android') || this.platform.is('ios')) ) {
    ionAppEl.setAttribute('style', 'height: 100%;');
  }
});

config.xml：

<platform name="android">        
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
        <activity android:windowSoftInputMode="adjustPan" />
    </edit-config>

---

在 cordova ionic-webview 2.2.0 中，我使用的是 background-size: cover;当我点击输入字段时，背景会调整大小。我没有使用离子框架，但它的一些插件例如

cordova-plugin-ionic-webview^2.2.0

cordova-plugin-ionic-keyboard^2.1.3

corodva-plugin-keyboard（这是移动到输入字段的位置所必需的）

这是我的解决方案：

CSS：

.content-background {
    background-size: 180% auto;
    background-image: url("img_path.jpg");
}

JS：

document.addEventListener('deviceready', function () {

    var widthHeightRatio = parseFloat((window.screen.width * window.devicePixelRatio) / (window.screen.height * window.devicePixelRatio)).toFixed(2);

    if(widthHeightRatio > 0.56){
        $('.content-background').css('background-size', '160% auto');
    }else if(widthHeightRatio < 0.56){
        $('.content-background').css('background-size', '210% auto');
    }
});

安卓：

阿尔卡特 1x 480x960 1.5 0.5 210% （宽 x 高 | devicePixelRatio | widthHeightRatio | 宽度）

Pixel C 平板电脑 1800x2560 2 0.70 150%

Nexus 7 平板电脑 1200x1920 2 0.63 150%

7 英寸平板电脑 600x1024 1 0.59 160%

iOS：

iPhone SE/5S 640x1136 2 0.56 180%

iPad 2 Pro（第三代） 2048x2732 2 0.749 140%

iPhoneX 1125x2436 3 0.46 210%

iPhone 5S 640x1136 2 0.56 180%

iPhone 6 Plus 1242x2208 3 0.56 180%

iPhone 7 750x1334 2 0.56 180%

iPhone 8 Plus 1242x2208 3 0.56 180%

iPhone XR 828x1792 2 0.46 210%

iPad Air（第三代） 1668x2224 2 0.75 140%

iPad Pro（9.7 英寸） 1536x2048 2 0.75 140%

iPad Pro（11 英寸） 1668x2388 2 0.70 150%

Answer 7

Android 默认情况下，当键盘打开时，整个 webview 会缩小，这意味着仅使用 CSS 是无法解决的。

其他一些回答是正确的，但没有一个达到我想要的预期结果。

所以，如果你像我一样，你不想：

• 在您的 CSS 中使用硬编码值，这样您的背景就不会调整大小
• 在您的 AndroidManifest.xml 中设置 android:windowSoftInputMode="adjustPan"

这是我使用 Ionic/Angular v5 的方法（您可能需要根据需要进行调整）：

首先，你需要安装@capacitor/keyboard，这样你才能检测到键盘何时打开。

然后在你的代码中，

background-cover-image.component.ts

export class BackgroundCoverImageComponent implements OnInit {

  @HostBinding('style.--min-height') public minHeight?: string;

  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}

  public ngOnInit(): void {
    Keyboard.addListener('keyboardDidShow', (info) => {
      this.minHeight = `${this.elementRef.nativeElement.clientHeight + info.keyboardHeight}px`;
    });
    Keyboard.addListener('keyboardDidHide', () => {
      this.minHeight = undefined;
    });
  }

}

background-cover-image.component.scss

:host {
  display: block;
  background: url(/assets/background.jpg) no-repeat center center;
  background-size: cover;
  min-height: var(--min-height, 100%);
}

换句话说，每次打开键盘时，我都会将组件的 min-height 设置为它的实际高度加上键盘的高度（所以它最终是键盘打开之前的大小），并且每次键盘已关闭，我将组件最小高度恢复为 100%。

除此之外，您可能需要添加其他@HostBinding（例如@HostBinding('class')），这样您就可以通过切换组件的类来控制CSS 中的min-height 行为，如果您不这样做，这可能会很有用'不总是希望min-height 申请。