Foldable Screen Adaptation for Android Apps and JD Mini-Programs
This article explains the challenges and solutions for adapting Android applications and JD mini‑programs to foldable screens, covering activity resizable settings, aspect‑ratio handling, configuration change management, multi‑window considerations, and specific strategies for ensuring seamless user experience across inner and outer displays.
Introduction: With the rapid development of smartphones, foldable screens have become a trend in Android, and JD mini‑programs need to adapt to provide better user and business value.
Android application foldable screen adaptation: The activity attribute resizableActivity defaults to true, allowing multi‑window resizing; developers can set it to false for compatibility mode. Proper handling of configuration changes—such as screen orientation, size, and keyboard visibility—requires saving UI state via onSaveInstanceState() , ViewModel, or persistent storage, or declaring android:configChanges (e.g., "orientation|screenSize|keyboardHidden") to prevent costly restarts.
Screen aspect‑ratio considerations: Android 10+ supports various ratios (e.g., 21:9, 1:1). Testing against a range of ratios and using maxAspectRatio / minAspectRatio helps avoid compatibility mode.
Current status of mini‑program foldable adaptation: Mini‑programs rely on WebView rendering; when the device folds, layout glitches and task‑stack issues appear. No official foldable‑screen guidance exists, and examples from JD Express mini‑program illustrate element size mismatches and inability to reopen from history.
Multi‑screen adaptation for mini‑programs: Use the responsive unit rpx, which maps 750 rpx to the device width (e.g., 375 px on iPhone 6). This enables automatic scaling across different screen sizes.
Problem analysis: Element size problems arise because the mini‑program retains the original dimensions while the container size changes after folding. Additionally, the JS engine may receive outdated window dimensions, leading to inaccurate rpx calculations.
Solution approach: 1) Record current screen parameters (width, height, orientation). 2) In onConfigurationChanged(Configuration newConfig) , compare new parameters to detect folding. 3) Handle edge cases such as video full‑screen orientation changes and multiple callbacks caused by bottom navigation bars. 4) Refresh UI either partially (notify business to refresh) or fully (restart the mini‑program) to apply new dimensions.
Additional considerations: Multi‑window and picture‑in‑picture modes require the mini‑program engine to ignore size changes that would otherwise trigger a restart. Proper handling of onNewIntent avoids duplicate restarts when both configuration change and intent callbacks occur.
WebView and JS engine dimension discrepancy: Replace usage of window.innerWidth/innerHeight with the actual screen dimensions provided by the system to ensure correct rpx computation.
Conclusion: Foldable screens represent a significant future trend for Android devices; implementing the described adaptation techniques ensures JD mini‑programs deliver a smooth experience across inner and outer displays.
JD Retail Technology
Official platform of JD Retail Technology, delivering insightful R&D news and a deep look into the lives and work of technologists.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.