css - 网页在 Windows 上放大

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 .