ios ui 与 android 和浏览器 ionic 不同

Posted 2023-03-15

【中文标题】ios ui 与 android 和浏览器 ionic 不同

【英文标题】：ios ui is different then android and browser ionic

【发布时间】：2019-07-25 07:34:06

【问题描述】：

我们已经为 ios 和 android 构建了一个 ionic 应用程序，但是它们的 ui 是不同的： 在 android 和浏览器中设计是完美的，但在 IOS 中设计发生了变化，这对我不利。

例如，我有一些不同颜色的标题，几个按钮有圆角半径等等......但我使用的是简单的按钮。

如何强制每个平台的样式都相同？

这是我的配置文件：

<?xml version='1.0' encoding='utf-8'?>
<widget id="xx" version="0.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>xxxxxxx</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="orientation" value="portrait" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
        <string>We use your location for full functionality of certain app features.</string>
    </edit-config>
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon  src="resources/ios/icon/icon.png"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/icon-40.png"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/icon-50.png"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/icon-60.png"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/icon-72.png"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/icon-76.png"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/icon-small.png"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/icon-1024.png"  />
        <splash  src="resources/ios/splash/Default-568h@2x~iphone.png"  />
        <splash  src="resources/ios/splash/Default-667h.png"  />
        <splash  src="resources/ios/splash/Default-736h.png"  />
        <splash  src="resources/ios/splash/Default-Landscape-736h.png"  />
        <splash  src="resources/ios/splash/Default-Landscape@2x~ipad.png"  />
        <splash  src="resources/ios/splash/Default-Landscape@~ipadpro.png"  />
        <splash  src="resources/ios/splash/Default-Landscape~ipad.png"  />
        <splash  src="resources/ios/splash/Default-Portrait@2x~ipad.png"  />
        <splash  src="resources/ios/splash/Default-Portrait@~ipadpro.png"  />
        <splash  src="resources/ios/splash/Default-Portrait~ipad.png"  />
        <splash  src="resources/ios/splash/Default@2x~iphone.png"  />
        <splash  src="resources/ios/splash/Default~iphone.png"  />
        <splash  src="resources/ios/splash/Default@2x~universal~anyany.png"  />
        <icon  src="resources/ios/icon/icon-20.png"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/icon-29.png"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <icon  src="resources/ios/icon/[e-mail]"  />
        <splash  src="resources/ios/splash/Default-2436h.png"  />
        <splash  src="resources/ios/splash/Default-Landscape-2436h.png"  />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
    <plugin name="cordova-plugin-statusbar" spec="2.4.2" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
    <allow-navigation href="http://localhost:8101" sessionid="38a03d66" />
</widget>

结果如下：

用于 ios 按钮

在安卓和浏览器中

【问题讨论】：

您能否添加更多详细信息，说明问题到底出在哪里，也许是一些您遇到问题的按钮和导航的屏幕截图？

【参考方案1】：

不是配置问题。在app.module.ts 文件中添加下面给出的行

imports: [
    BrowserModule,
    IonicModule.forRoot(
      mode: 'md', //ios or md
    ),
]

mode="md"此行添加