Ion-Searchbar 未在本机 Android 设备上显示

Question

当我在浏览器上运行我的角度（离子）应用程序时，一切正常并且看起来很好 （Angular v17.0.2、Ionic v8.2.2）。当我 npx cap 同步它并在带有 android studio 的设备上尝试它时，它看起来像我添加的第二个图像。 z-index 没有任何问题，我已经检查过了。 html 和 css 非常简单，所以我不明白这里有什么问题。请帮帮我..

    <ion-row class="search"> <ion-col size="10"> <ion-searchbar #input (search)="searchJobs(input.value)" (keydown.enter)="searchJobs(input.value)" placeholder="Search For Jobs"></ion-searchbar> </ion-col> <ion-col size="2"> <ion-button mode="ios" class="ion-align-self-center" (click)="toggleModal()"> <ion-icon name="options"></ion-icon> </ion-button> </ion-col> </ion-row>

` ion-row.search { 右内边距：1.5vh； 对齐项目：中心；

ion-searchbar {
display: flex;
height: 50px;
width: 100%; /* Ensure it takes full width */
--background: white;
--border-radius: 10px;
}
}`

浏览器：https://i.sstatic.net/BY1R2fzu.png

Android Studio：https://i.sstatic.net/BHRrHBJz.png

Answer 1

检查视口元标记：确保在您的index.html 中正确设置视口元标记。这会极大地影响内容在不同设备上的扩展方式。它应该看起来像这样：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

设备特定样式：有时，需要针对移动设备专门调整样式。您可以使用媒体查询添加仅适用于较小屏幕或特定设备的样式：

@media only screen and (max-width: 600px) { ion-searchbar { height: 40px; // Adjust height for mobile devices } }