Detailed explanation of the problem summary of h5 pages on different ios devices

Recently, I was writing an h5 page embedded in the mini program webview, which is a function of article comments. In the process, I encountered many compatibility issues, and the performance on different models was also very inconsistent, so I summarized the following issues: Record it so you can review it later

For yyyy-mm-dd hh:mm:ss, this format is not recognized by the ios system

When the time is formatted, it is processed well on the browser side, but when it reaches the mobile phone, it becomes NAN or null. In this case, the iOS system cannot convert this type of time.

 let date = new Date('2019-02-28 18:33:24'); // null`

The solution is to convert it to the format yyyy/mm/dd hh:mm:ss.

 replace(//-/g, /)

On ios12, I found that when the keyboard is retracted, the page will be stuck, leaving the bottom blank. If you move the page slightly, it will be restored.

For this kind of problem, I checked many solutions on the Internet. The solution is roughly to scroll the page during the blur event.

 window.scrollTo(0, scroll);

But there is a very serious problem: if there are buttons on the page that need to be operated, for example, a comment input box + publish button, after entering the text, click publish, and when the click event is triggered, the page will trigger the blur event first, and the keyboard will fall back. Then it was over. . . . Button click does nothing.

Solution: Changing the click event to ontouchstart can solve this problem. ontouchstart event is better than click event triggering

This problem is suspected to be caused by the page scroll setting auto.

Solution: All sibling elements become absolute, and the parent element overflow:auto;

 Parent element: height: 100vh; position: relative; overflow: auto; Sibling elements: position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-x: visible; overflow-y: auto; padding-bottom: 10px; z-index: 1

If the input box is fixed at the bottom using fixed, when the keyboard is raised, the fixed will fail on the iPhone, causing the page to scroll. The input box will scroll with the page, and on some models, the input box will occasionally be blocked by the keyboard. This Occasional problems, very unfriendly

Solution: Give up using fixed layout. If the page has scrolling, give up absolute. If you are forced to use absolute, please refer to the previous article on cursor offset.

It is recommended to use flex layout, and compatibility will be resolved.

Of course, if you encounter the above problems, it means that the product design is very unreasonable. If necessary, you still need to change the design to a design where the input does not need to be pushed up by the keyboard. These compatibility solutions are not perfect. Solve the problems of all models.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.