The pitfall record of the rubber rebound effect of iOS WeChat H5 page
Business requirementsOne of the projects I have developed recently is an H5 page related to WeChat official accounts. The page display is normal on the Android WeChat, but there are some unexpected bugs on the iOS WeChat. This time, we mainly record the rubber rebound (rubber band effect) problem of mobile H5 pages on iOS, hoping to help students who encounter similar problems. 🐕Solution 1: Use inobounce.jsinobounce.js github address Introduce inbounce.js in the header tag of the HTML main page, that is. After this file is introduced, the entire page on iOS cannot be slid or scrolled. If you want the scrolling element to achieve the scrolling effect, you need to set a fixed height for the scrolling area, that is, height, max-height, and also set overflow: auto to achieve page sliding. To prevent page scrolling from freezing on iOS, you need to set the -webkit-overflow-scrolling: touch property for the scrolling area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inobounce</title>
<script src="inobounce.js"></script>
<style>
ul {
height: 115px;
border: 1px solid gray;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
</ul>
</body>
</html>
🐒 Solution 2: CSS style processing (recommended)By chance, when I opened the H5 activity pages of some public accounts on the iOS side, there was no so-called rubber rebound effect. So I wondered whether this effect could be used to solve the rubber rebound effect produced by the iOS web pages. Finally, this method can be used to fix the page on iOS without producing the rubber rebound effect. The rubber band effect has been resolved on devices with system version iOS13+. It has not been tried on devices with system version iOS12+. We plan to find an Apple phone with iOS12+ for further testing and then supplement the test results. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>iOS Eraser Rebound</title> </head> <body> <!-- Content area --> <div id="app"></div> </body> </html> Main CSS code:
/* Initialization */
* {
margin: 0;
padding: 0;
}
/* Basic style */
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
box-sizing: border-box;
position: relative;
}
/* scroll out of range */
#app {
width: 100%;
height: 100%;
overflow-y: auto;
}
🐬Summary:In general, I have tried both solutions in actual development. Solution 1 can perfectly solve the rubber rebound effect when browsing H5 web pages in WeChat. When the H5 page is authorized to jump on the iOS WeChat, there will be a navigation bar at the bottom. At this time, the navigation bar may also be covered, and clicking the buttons at both ends of the navigation bar will not respond. When opening an H5 page in Safari, the address bar at the top and the menu bar at the bottom of the webpage will be blocked to a certain extent, and the experience is not very ideal. Ultimately, this solution was passed. Solution 2 is what I use in my actual work, and the rebound effect has been improved to a certain extent. The experience effect has been greatly improved compared with Solution 1. If the page has WeChat authorization and the page path jumps, there will be an additional navigation bar at the bottom of the web page opened by WeChat on iOS. Similarly, there will be no similar navigation bar on WeChat on Android. If there is no WeChat authorization and page jump, both solutions are optional; if there is WeChat authorization, it is recommended to use solution 2. This is the end of this article about the eraser rebound effect of the iOS WeChat H5 page. For more relevant iOS WeChat H5 page eraser rebound content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: How to configure virtual user login in vsftpd
>>: How to unify the character set on an existing mysql database
Recommend
Detailed explanation of linux crm deployment code
Linux basic configuration Compile and install pyt...
HTML table tag tutorial (32): cell horizontal alignment attribute ALIGN
In the horizontal direction, you can set the cell...
Detailed steps to install MySQL 5.7 via YUM on CentOS7
1. Go to the location where you want to store the...
In-depth study of JavaScript array deduplication problem
Table of contents Preface 👀 Start researching 🐱🏍...
Vue implements countdown function
This article example shares the specific code of ...
How to deploy python crawler scripts on Linux and set up scheduled tasks
Last year, due to project needs, I wrote a crawle...
How to test network speed with JavaScript
Table of contents Preface Summary of the principl...
Docker container monitoring principle and cAdvisor installation and usage instructions
It is very important to monitor the operating sta...
CSS3+Bezier curve to achieve scalable input search box effect
Without further ado, here are the renderings. The...
How to decrypt Linux version information
Displaying and interpreting information about you...
MySQL 5.7.16 free installation version installation and configuration method graphic tutorial
This article records the installation and configu...
How to run top command in batch mode
top command is the best command that everyone is ...
Vue3.0 implements the encapsulation of the drop-down menu
Vue3.0 has been out for a while, and it is necess...
How to use Typescript to encapsulate local storage
Table of contents Preface Local storage usage sce...
MySQL 8.0.11 installation tutorial with pictures and text
There are many tutorials on the Internet, and the...