我正在开发一个 ionic3 应用程序。一切都很好,除了在输入中使用键盘或输入聚焦时,背景图像会调整大小,这会使 View 变得糟糕。我在谷歌上搜索了很多,我在论坛中发现了以下问题。不幸的是,它们在 ionic3 中对我不起作用。
image resize in ionic . image resize in ionic 现在我要提供一些代码。
<ion-header>
<ion-navbar>
<ion-title>
ورود به حساب
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="login">
<div class="login-form">
<ion-grid>
<ion-row>
<ion-col col-sm-12>
<ion-list inset>
<ion-item>
<ion-label ionitron-bot>
<ion-icon name="person"></ion-icon>
</ion-label>
<ion-input
[(ngModel)]="phone"
type="tel"
placeholder="794737444"
></ion-input>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-sm-12></ion-col>
</ion-row>
</ion-grid>
</div>
</div>
</ion-content>
**
Scss 样式代码。
page-new-user {
ion-content{
height: 100%;
}
div.login {
width: 100%;
height: 100%;
background: url("../../../assets/imgs/bg-01.jpg") no-repeat;
background-size: cover;
background-position: 100% 100%;
height: 100%;
div.login-form {
width: 50%;
height: auto;
margin: auto;
background-color: #ddd;
}
}
}
现在我要提供该应用程序的屏幕截图。
最佳答案
ion-content{
height: 100%;
.scroll-content{
padding-bottom: 0px !important;
}
}
div.login {
width: 100%;
height: 100%;
background: url("../../../assets/imgs/bg-01.jpg") no-repeat;
background-size: cover;
background-position: 100% 100%;
height: 100%;
div.login-form {
width: 50%;
height: auto;
margin: auto;
background-color: #ddd;
}
}
应该修复添加到 ion-content 中的 .scroll-content{padding-bottom: 0px !important;}
会阻止 ion-scoll 组件更改其填充。
关于html - 背景图片调整大小改变了android中的 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55934126/