基于Ionic 1框架的应用高分辨率设备黑边问题求助

Hey there! Those black bars are super frustrating, especially when your app looks great on older devices but gets cramped on high-res, full-screen hardware. Let's break down exactly how to fix this—since Ionic 1 is a bit older, it needs some extra config love to play nice with modern devices.

Core Reason for the Black Bars #

Ionic 1 was built before full-screen phones (like iPhone X) and newer Android versions (Android 9+) became standard. By default, Cordova uses older screen compatibility settings that don’t account for the wider aspect ratios or safe areas on these devices. The black bars are the system’s way of "letterboxing" your app to fit an outdated "standard" screen size.

Android 9.0+ (Samsung & Others) Fixes #

1. Update Config.xml for Android #

Open your project’s config.xml and tweak these settings under the <platform name="android"> section:

• Set a modern target SDK version (matches Android 9):

  <preference name="android-targetSdkVersion" value="28" />
  <preference name="android-minSdkVersion" value="21" />
  

• Enable resizable activity to let the app adapt to the screen:

  <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
      <application android:resizeableActivity="true" />
  </edit-config>
  

• Fix splash screen scaling so it fills the screen:

  <preference name="SplashScreenScale" value="centerCrop" />
  <!-- Ensure you have high-res splash images for xxxhdpi, xxhdpi, etc. -->
  <splash src="resources/android/splash/drawable-xxxhdpi-screen.png" density="xxxhdpi" />
  

2. Update Cordova Plugins #

Outdated plugins can cause compatibility hiccups. Run these commands to refresh critical plugins:

cordova plugin update cordova-plugin-splashscreen
cordova plugin update cordova-plugin-statusbar

iOS (iPhone X & Newer) Fixes #

iPhone X and later have notch displays and safe areas, which require two key fixes:

1. Config.xml Adjustments #

Under <platform name="ios"> in config.xml:

• Enable viewport fitting to let the app cover the full screen:

  <preference name="viewport-fit" value="cover" />
  

• Add high-res splash screens for full-screen iPhones:

  <splash src="resources/ios/splash/Default-2436h.png" width="1125" height="2436" /> <!-- iPhone X/XS -->
  <splash src="resources/ios/splash/Default-1242h.png" width="1242" height="2208" /> <!-- iPhone 6+/7+/8+ -->
  

2. CSS for Safe Areas #

Ionic 1 doesn’t handle safe areas natively, so add these styles to your main CSS file (like style.css):

/* Apply safe area padding to the entire body */
body {
    padding-top: constant(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Adjust Ionic headers and footers to avoid being cut off */
.bar-header {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

.bar-footer {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Make sure ion-content doesn't get hidden under safe areas */
ion-content {
    margin-top: constant(safe-area-inset-top);
    margin-bottom: constant(safe-area-inset-bottom);
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
}

Universal Checks for Both Platforms #

1. Verify Viewport Meta Tag: In your index.html, make sure the viewport tag includes viewport-fit=cover:

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   

2. Test on Real Devices: Emulators can sometimes show false positives, so always test on actual Android 9+ and iPhone X devices to confirm the fix works.
3. Clear Build Cache: Old build files can cause lingering issues. Run these commands to clean and rebuild:

   cordova clean android
   cordova clean ios
   cordova build android
   cordova build ios
   

内容的提问来源于stack exchange，提问作者Vinay