H5 page common development problems summary

Summary

 　　Recently in the development of H5, I found that there are some pits in H5 during the development process, so I will summarize the pits and solutions encountered during the development process. This article will be continuously updated. Pits, solutions, etc.

 

Common general H5 development problems

 

IOS-H5 development problems

　· Input method hides the page blank

　　Problem phenomenon: After the soft keyboard on the iOS side loses focus (hidden), the page will not rebound, and a white block of the input method block will be left at the bottom of the page.

　   Solution: After the soft keyboard is retracted (hidden), scroll the page, and the blank blocks on the page will disappear. So as long as the "scrolling" operation is completed after the input is completed, the problem can be solved.

　   React (React Hook) development solution: (code implementation part)

  // Enter the keyboard to hide the rebound 
  useEffect (() => { 
    document.addEventListener ( ' focusout ' , function (e) { 
      let u = navigator.userAgent; 
      let isiOS = !! u.match (/ \ (i [^; ] +; (U;)? CPU. + Mac OS X /); // ios terminal 
      if (isiOS) { 
        window.scrollTo ( 0 , 0 ); 
      } 
    }) 
  }, [])

 

 

Android-H5 development issues

 　　· Video level problem

　　Problem phenomenon: Clicking the login popup window can display normally. After clicking to play the video, the video level becomes the highest level. Clicking the login popup window again is blocked by the video. No matter how the z-index login popup window is displayed, the popup window cannot be displayed normally. .

       Solution: The built-in browser of Android WeChat is the X5 kernel, and the default video level in the X5 kernel is the highest level, so there is no way to change the display of the hierarchy by changing the z-index. When using the video tag, you can add the attribute of x5-video-player-type = 'h5-page'. At this time, the video in H5 is enabled with the same layer of H5 player, so that you can adjust the video, pop-up window, etc. Hierarchical display.

       React development solution: (code implementation part)

< video 
  id = " player " 
  controls = { true } 
  width = " 100% " 
  height = " 100% " 
  x5 -video-player-type = " h5-page "  // Enable the same layer H5 player 
  x5-video-orientation = " landscape | portrait "  // The video automatically rotates with the phone 
> 
  <source src = {videoUrl} type = " video / mp4 " /> 
</ video>

     CSS style code:

 video {
    object-fit: fill;
    object-position: center;
 }