Shulou(Shulou.com)06/01 Report--

This article mainly explains the "html5 for different IOS devices for different problem case analysis", the article explains the content is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "html5 for different IOS devices for different problem case analysis" bar!

1. Date problem

The format of yyyy-mm-dd hh:mm:ss is not recognized in ios system

When the time is formatted, it is handled well on the browser side, and on the mobile side, it becomes NAN, or null, in this case, the ios system cannot convert this type of time.

Let date = new Date ('2019-02-28 18Suzhou 3324'); / / null`

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

Replace (- / g, "/")

2. The keyboard is put away, the page is stuck and does not fall back.

On ios12, when you find that the keyboard is folded, the page will be stuck, leaving a blank at the bottom. If you move the page a little, it will be restored.

This kind of problem, looked up a lot of solutions on the Internet, roughly in the blur event, let the page scroll.

Window.scrollTo (0, scroll)

But there is a serious problem: if there is a button on the page to operate, for example, the comment input box + publish button, after typing the text, click "publish", when the click event is triggered, it will cause the page to trigger the blur event first, the keyboard will fall back, and then it's all over. No, no, no. no, no, no. The click of the button has no effect.

Solution: replacing the click event with ontouchstart can solve this problem. Ontouchstart events are superior to click event triggers

3. Ios12 is in WeChat Mini Programs's webview. The keyboard is withdrawn and the bottom of the page will be left blank.

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

4. Iphone fix invalidation, resulting in textarea cursor offset on some machines

Solution: all sibling elements become absolute, parent element overflow:auto

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

5. Keyboard occlusion input box

If the input box is fixed at the bottom of the fixed, when the keyboard is up, the fixed on the iphone will fail, causing the page scrolling input box to scroll along with the page, and on some models, the input box will occasionally be obscured by the keyboard. This occasional problem is very unfriendly.

Solution: give up the use of fixed layout, if the page scrolls, also abandon absolute, if forced to use absolute, please refer to the previous cursor offset

Flex layout is recommended and compatibility will be resolved.

Of course, if you encounter these problems, the product design is very unreasonable, if necessary, it is necessary to change the design to an input design that does not need to be pushed up by the keyboard, and these compatibility solutions do not perfectly solve the problems of all models.

Thank you for your reading, the above is the content of "html5 analysis of different problem examples of different IOS devices". After the study of this article, I believe you have a deeper understanding of the analysis of different problem examples of different IOS devices by html5, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.