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类或使用{{1虽然我不确定为什么会这样有效。

还有一个similar question asked about Ionic 2，其中一个答案是检测设备的高度并将其用于背景大小，以便忽略WebView高度。我建议你试试这样的事情。

Answer 3

我解决了这个问题，将background和background-size: cover定义放在离子视图中而不是离子内容中。

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%;
}

这里的关键部分是：

容器尺寸100％
bg尺寸280％
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" };

OR

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

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

OR

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

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

Answer 6

我的用例：我正在使用background-size：cover;当我点击输入字段时，背景会调整大小。我不是在使用ionic框架，而是其中的一些插件

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');
    }
});

Android：

阿尔卡特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％

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

6 个答案: