Решение (вроде) -> В итоге я просто поместил mode = "ios" на все сегменты / кнопки / вкладки, и они помещаются на экране, у них просто нет стиля оформления материала.
У меня есть ионные сегменты и ионные вкладки, которые выглядят фантастически на iOS, но на Android они просто не вписываются в вид и обрезаются, потому что они выходят за его пределы.
Я могу предоставить некоторую картину, показывающую точную проблему, с которой я сталкиваюсь: https://imgur.com/a/uXtkdUN. Я попытался установить свойства CSS просто для того, чтобы попытаться установить его внутри, и ничего не работает, я также пытался просто установив режим для кнопки сегмента на iOS, но она тоже не работает.
<app-header></app-header>
<ion-content>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="md-refresh" refreshingSpinner="crescent" color="primary" disabled="false"
pullingText="Pull to refresh" refreshingText="Refreshing..."></ion-refresher-content>
</ion-refresher>
<ion-progress-bar *ngIf="loading" color="secondary" type="indeterminate"></ion-progress-bar>
<ion-searchbar animated="true" placeholder="Search" [showCancelButton]="false" [(ngModel)]="searchFilter"></ion-searchbar>
<ion-segment color="dark" [(ngModel)]="leaderboardType">
<ion-segment-button value="commuter">Commuter</ion-segment-button>
<ion-segment-button value="business">Business</ion-segment-button>
</ion-segment>
<ion-segment color="primary" value="0" [(ngModel)]="commuteFilter">
<ion-segment-button value="0">
<ion-icon name="md-infinite"></ion-icon>
All
</ion-segment-button>
<ion-segment-button *ngFor="let method of commuteMethods" value='{{method.id}}'>
<ion-icon name="{{method.icon}}"></ion-icon>
{{method.name}}
</ion-segment-button>
</ion-segment>
<app-commuter-leaderboards *ngIf="leaderboardType === 'commuter' && users" [users]="users" [commuteFilter]="commuteFilter" [commuteYear]="commuteYear" [searchFilter]="searchFilter"></app-commuter-leaderboards>
<app-business-leaderboards *ngIf="leaderboardType === 'business' && users" [users]="users" [commuteFilter]="commuteFilter" [commuteYear]="commuteYear" [searchFilter]="searchFilter"></app-business-leaderboards>
</ion-content>
А вот страница с ионными вкладками
<ion-tab-bar slot="bottom" color="primary" mode="ios">
<ion-tab-button tab="activities">
<ion-icon name="md-globe"></ion-icon>
<ion-label>News Feed</ion-label>
</ion-tab-button>
<ion-tab-button tab="leaderboards">
<ion-icon name="md-podium"></ion-icon>
<ion-label>Leaderboards</ion-label>
</ion-tab-button>
<ion-tab-button (click)="openCommuteEntryDialog()">
<ion-icon name="md-add-circle"></ion-icon>
<ion-label>Log Commute</ion-label>
</ion-tab-button>
<ion-tab-button tab="users/{{currentUser.id}}">
<ion-icon name="md-contact"></ion-icon>
<ion-label>Profile</ion-label>
</ion-tab-button>
<ion-tab-button tab="information">
<ion-icon name="md-information-circle"></ion-icon>
<ion-label>Information</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
И, наконец, index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smart Commute Emmet</title>
<base href="/" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
Я ожидаю, что при загрузке ионного приложения на телефон Android с помощью браузера Chrome оно должно отображать весь ионный сегмент и панель вкладок и не позволять ему выходить за пределы экрана.