WeChat Mini Program Android_IOS Compatibility Issues

I. Background

When developing WeChat applets, compatibility problems will occur on different phone models.

II. Summary of Android/IOS Compatibility Issues

2.1. The iIOS is not compatible with the new Date time conversion format.

Issue: Time format 2024-1-31 10:10:10 in Android, but “-” is not supported as a date delimiter in IOS

Cause: YYYY-DD-MM time format is not supported on iOS and Safari

Resolve: Replace “-” with “/” on date

 let time = new Date('2022-12-13 19:00'.replace(/-/g,'/'))

2.2. Picture format display

Problem: The picture in .webp format cannot be displayed on the ios device.

Reason: Safari, the native browser of the iOS system, does not support the .webp format

Resolution: Replace the suffix name of webp with the suffix name of jpg or png

img.replace(/\.webp/,'.jpg')

2.Invalid iOS model margin attribute

Issue: IOS invalid when bottom footer sets margin attribute

Cause: After iOS8, the UiView has an attribute var layoutMargins:UIEdgeinsets. If a view is the rootview of ViewController, the system will automatically set and manage the margins. The top and bottom margins are set to 0pt. The values of left and right are different according to the current size class. The values may be 16or 20pt iPhone6 plus. You cannot modify these values.

Solution: Add an empty box div to the bottom footer to give the height value.

2.4. IOS security area adaptation

Problem: On the iOS device, you can see that the physical home key is canceled and the home key function is replaced by a small black bar at the bottom. WeChat applets and h5 web pages need to be adapted to this situation or you may encounter a situation where the bottom button or tab bar overlaps with the bottom black line

Solution: Two Ways

Method 1: Use the safeArea object in the WeChat official APIs, wx.getSystemInfo

# wx.getSystemInfo ComparedscreenHeightandsafeArea.bottom

If the model needs to be adapted, use the bottom in the safeArea to obtain the vertical coordinates of the bottom of the security area, and then use the screenHeight to subtract the bottom to obtain the height of the small black bar. It can be saved in the localstorage and used globally.

Method 2: Adapt using the official css functions env and constant

# cssfunctionenv()、constant()adaptation

Env and constant are new features of IOS11. The css function of Webkit is used to set the distance between the security area and the boundary. There are four predefined variables:

Safe-area-inset-left: Distance from the security area to the left boundary safe-area-inset-right: Distance from the security area to the right boundary safe-area-inset-top: Distance from the security area to the top boundary safe-area-inset-bottom: Distance from the bottom boundary of the safe distance

Because the target is to adapt to the small black bar at the bottom, you only need to pay attention to the value of safe-area-inset-bottom.

This can be done when making screen adaptation

padding-bottom: constant(safe-area-inset-bottom); /*compatible IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*compatible IOS>11.2*/

2.The cursor and font of the input input box are not centered in the ios.

Problem: The cursor and font of the input input box are not centered in the ios.

Cause: The automatic check function of IOS will format the input content, resulting in offset of the text display position.

Solution: Two Ways

Method 1: Disable the automatic check function: Set the type property of the input to text to disable the automatic check function of the IOS, so as to solve the problem of cursor and text non-centering.

Method 2: Use the CSSStyle: By setting the padding and font-size properties of the input, the text in the input box can be centered vertically and horizontally.

input {
  padding: 10px 0; /* Center vertically */
  font-size: 16px; /* font size */
}

2.IOS uses overflow: Auto. Scrolling Stops

Resolve: -webkit-overflow-scrolling: touch

This document is transferred from https://blog.csdn.net/weixin_71403100/article/details/135958018，If there is any infringement，Please contact to delete。