Question

因此，我正在使用Ionic PWA ToolKit构建PWA。现在它可以在我的Mac上显示，但我最近在3台运行Windows的笔记本电脑上进行了尝试，一切似乎都在放大。

这是它在我的Mac上的显示方式，应显示为：

这是它在Windows（其他笔记本电脑）上的显示方式：

这是我的CSS：

    /*
* =============================================================================================
* Content Section
* =============================================================================================
*/
app-bus-home  {
  background: url(../assets/img/banners/bus.jpg) no-repeat bottom/cover;
  min-height: 730px;
  text-align: left;
  color: #ffffff;

}

app-bus-home ion-grid {
  max-width: 1200px;
}

app-bus-home ion-text h1 {
  margin-top: 90px;
}

app-bus-home h1 {
  font-size: 60px;
}

app-bus-home ion-img.bus {
  width: 500px;
  margin-top: 65px;
}

date-picker {
    width: 500px;
    margin-top: 25px;
    display: none;
    position: absolute;
    z-index: 2000;
    top: 25px;
    overflow: hidden;
}

这是JSX布局：

render() {
        return [
            <ion-grid align-items-start>
                <ion-row>
                    <ion-col>
                        <ion-text color="light">
                            <h1 class="font-light animated slideInLeft">BUS <strong class="font-black">TICKETS</strong></h1>
                            <p class="font-light animated slideInLeft">xxxxxx</p>
                            <p class="font-light animated slideInLeft">xxxxxx</p>
                        </ion-text>
                        <ion-img class="bus animated zoomIn" src="../assets/img/bus.png" />
                    </ion-col>
                    <ion-col size="4" padding>
                        <bus-search class="animated slideInRight"></bus-search>
                        <date-picker availableDates={this.availableDates} actionUrl={this.actionUrl} showHeader={true} showButtons={true} class="animated"></date-picker>
                    </ion-col>
                </ion-row>
            </ion-grid>
        ];
    }

Answer 1

您的页面没有响应，因此这意味着您无法在不同的设备上以相同的方式查看它。为了在多个设备上优化可视化效果，我建议您在CSS中使用'％'而不是'px'。

或者，您可以使用Bootsrap之类的库来执行此操作。 Bootstrap提供了许多类来使您的页面具有响应性。通常，我使用以下文档：https://www.w3schools.com/bootstrap4/default.asp。

在Windows上放大网页

1 个答案: