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
MySQL configuration SSL master-slave replication
MySQL5.6 How to create SSL files Official documen...
Detailed steps for embedding Baidu Maps in web pages and using Baidu Maps API to customize maps
Insert Baidu Map into the web page If you want to...
Nginx external network access intranet site configuration operation
background: The site is separated from the front ...
Detailed graphic tutorial on installing centos7 virtual machine in Virtualbox
1. Download centos7 Download address: https://mir...
Vue uses drag and drop to create a structure tree
This article example shares the specific code of ...
A brief analysis of Linux network programming functions
Table of contents 1. Create a socket 2. Bind sock...
How to modify the forgotten password when installing MySQL on Mac
1. Install MySQL database on mac 1. Download MySQ...
Nginx restricts IP access to certain pages
1. To prohibit all IP addresses from accessing th...
MYSQL5.6.33 database master/slave (Master/Slave) synchronization installation and configuration details (Master-Linux Slave-windows7)
1. Installation environment Here is also a record...
Steps to install RocketMQ instance on Linux
1. Install JDK 1.1 Check whether the current virt...
The problem of jquery.form.js denying access in IE and the input upload button must be actively clicked
Let's take a look at the code first <form ...
How to view mysql binlog (binary log)
For example, when you create a new table or updat...
jQuery implements accordion effects
This article shares the specific code of jQuery t...
Summary and analysis of commonly used Docker commands and examples
Table of contents 1. Container lifecycle manageme...
Introduction and use of Javascript generator
What is a generator? A generator is some code tha...