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

This article mainly explains "analyzing several compatibility pits developed at the front end of WeChat H5 page". The explanation content in this article is simple and clear and easy to learn and understand. Please follow the idea of Xiaobian and go deep into it slowly to study and learn "analyzing several compatibility pits developed at the front end of WeChat H5 page" together.

1, iOS compatible input cursor height

Problem description: input input box cursor, no problem on Android phone, but on Apple phone

When typing, the cursor height is the same as the parent box height. For example, in the figure below, the input box cursor is normally expected on the left, and the input cursor of ios is on the right.

Reason analysis: Usually we are used to setting the height between rows with the height attribute and the distance between rows (row height) with the line-height attribute. When clicking the input, the height of the cursor will automatically be the same as the height of the parent box. (Google Chrome design principle, another possibility is that when there is no content, the cursor height is equal to the input line-height value, when there is content, the cursor goes from the top of the input to the bottom of the text.)

Solution: height and line-height content with padding

For example:

.content{ float: left; box-sizing: border-box; height: 88px; width: calc(100% - 240px); .content-input{ display: block; box-sizing: border-box; width: 100%; color: #333333; font-size: 28px; //line-height: 88px; padding-top: 20px; padding-bottom: 20px; } }

2. When the ios WeChat h6 page slides up and down, the page is stuck and missing.

Description of the problem details: In the ios end, when sliding up and down the page, if the page height exceeds one screen, there will be obvious stagnation, and some of the contents of the page are not fully displayed. For example, the picture below, the right is the normal page, and the side is ios. After sliding up and down, the stagnation causes the following part to be lost as shown in the left.

Cause analysis:

Generally speaking, the kernel of WeChat browser, Android uses its own WebKit kernel, iOS uses its own Safari kernel due to Apple's reasons, Safari uses native controls for overflow-scrolling. For pages with-webkit-overflow-scrolling, a UIScrollView is created, providing sublayers for the rendering module to use. [To be verified]

Solution: Just add the following line to the common style

*{ -webkit-overflow-scrolling: touch; }

But, this attribute is buggy, for example, if you have a node with absolute positioning set in your page, then the display of the node will be disordered, and of course there will be other bugs.

What is-webkit-overflow-scrolling:touch?

MDN is defined as follows:

The-webkit-overflow-scrolling property controls whether the element uses scroll rebound on mobile devices.

auto: With normal scrolling, scrolling stops immediately when the finger is removed from the touch screen.

touch: Use scrolling with a rebound effect. When the finger is removed from the touch screen, the content continues to scroll for a while. The speed and duration of scrolling continue to be proportional to the intensity of the scrolling gesture. A new stack context is also created.

3. The ios keyboard is aroused, and the page does not return after the keyboard is retracted.

Detailed description of the problem:

Input content, the soft keyboard pops up, the page content moves up as a whole, but the keyboard is retracted, the page content does not slide down

Cause analysis:

Fixed positioning of the element within the element when the input box is in focus pop up soft keyboard placeholder when the focus is lost soft keyboard disappears but still placeholder causes the input box can not be input again give an event when the focus is lost

Solution:

Name of Insured Person changeBlur(){ let u = navigator.userAgent, app = navigator.appVersion; let isIOS = !! u.match(/\(i[^;]+;( U;)? CPU.+ Mac OS X/); if(isIOS){ setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 200) } }

Expand knowledge: position: fixed elements in ios, when the keyboard is retracted, it will be pushed up, especially for third-party keyboards.

4. Android pop-up keyboard covers text box

Detailed description of the problem:

Android WeChat H5 pops up the soft keyboard and blocks the input input box. The left picture shows the expected appearance of the keyboard, and the right one shows the actual appearance of the keyboard.

Cause analysis: to be supplemented

Solution: Add focus event to input and textarea tags, as follows, first determine whether it is an operation under Android phone, of course, you can not determine the model, Document object attributes and methods, setTimeout delay 0.5 seconds, because the call Android keyboard is a bit slow, resulting in scrolling failure if it is not delayed

changefocus(){ let u = navigator.userAgent, app = navigator.appVersion; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; if(isAndroid){ setTimeout(function() { document.activeElement.scrollIntoViewIfNeeded(); document.activeElement.scrollIntoView(); }, 500); } },

Knowledge expansion:

The Element.scrollIntoView() method scrolls the current element into the viewable area of the browser window. Element.scrollIntoViewIfNeeded() method is also used to scroll elements that are not in the visible area of the browser window to the visible area of the browser window. However, if the element is already within the visible area of the browser window, scrolling does not occur

5. Vue routing uses hash mode. When developing WeChat H5 page sharing, setting sharing on Android is successful, but ios sharing is abnormal.

Detailed description of the problem:

ios current page to share with friends, click in is normal, if the second share, jump to the home page; use vue router to jump to the second page after sharing, sharing settings failed; the above Android sharing is normal

Reason analysis: jssdk is back-end signing, front-end verification, but sometimes cross-domain, ios is shared after automatically bringing from=singlemessage&isappinstalled=0 and other parameters, sharing circle parameters are not the same, it seems that the system is different parameters are different, but each time you get url and can not get the latter parameters

Solution:

(1)You can use this page to change this.$ router.push jump, for_window.location.href to jump, rather than using route jump, so that the address bar address and the current page address the same, can be shared successfully (suitable for sharing the page is not many cases, as a single page application, so refresh the page jump, or..)

(2) Save the entry address locally, and take it out when you need to obtain the signature. Note: sessionStorage.setItem ('href ',href); Save it only when you first enter a single application!

Thank you for reading. The above is the content of "analyzing several compatibility pits developed at the front end of WeChat H5 page." After studying this article, I believe everyone has a deeper understanding of the problem of analyzing several compatibility pits developed at the front end of WeChat H5 page. The specific use situation still needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

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.