Fixed with input is invalid in ios
On ios, if a page has a fixed layer with input focused on it, the fiexed layer will not be positioned properly.
As shown in figure:
Example: demo.zhangruojun.com/static/page…
/* * @author: zhangruojun; * @design: ; * @update: 2016-05-24; * /
/*reset*/
body.dl.dd.h1.h2.h3.h4.h5.h6.p.form { margin: 0; }
ol.ul.input {margin: 0; padding: 0; }
ol.ul { list-style: none; }
body { -webkit-font-smoothing: antialiased; font-family: Arial, DroidSansFallback, Helvetica, Tahoma, \5FAE\8F6F\96C5\9ED1, sans-serif, Sans; }
h1.h2.h3.h4.h5.h6.p { font-weight: normal; }
a.button.button:active.input { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -webkit-appearance: none; }
em.i { font-style: normal; }
a { text-decoration: none; }
img { border: none; }
input:focus { outline: none; }
/*rem = px / 30 */
html.body { position: relative; height: 100%; }
.page { overflow: auto; -webkit-overflow-scrolling: touch; }
.wrapper { position: relative; font-size: 0.8 rem; color: # 333; }
.container { position: relative; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; font-size: 0.8 rem; color: # 333; }
.intro-detail { padding-bottom: 4.77 rem; }
.modal { overflow: hidden; min-height: 20rem; }
.cont-md { padding: 3.0 rem 0 0 0; text-align: center; line-height: 1.6; white-space: nowrap; }
.cont-md .tit { font-size: 1.07 rem; line-height: 1.4; }
.cont-md .lead { margin: 1.0 rem 0 0 0; }
.intro-detail .modal:nth-child(1) { background-color: #f4f5f6; }
.intro-detail .modal:nth-child(2) { background-color: #d6dae3; }
.intro-detail .modal:nth-child(3) { background-color: #A9B0C5; }
.intro-detail .modal:nth-child(4) { background-color: #6D789D; color: #fff; }
.sticky-bt { display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; justify-content: center; -webkit-justify-content: center; }
.sticky-bt { position: fixed; left: 0; right: 0; bottom: 0; height: 4.77 rem; background-color: rgba(0, 0, 0, 5);z-index: 10; }
.btn-primary { display: block; width: 20.1 rem; height: 2.93 rem; line-height: 2.93 rem; border-radius: 2.93 rem; margin: 0 auto; background: #4D5572; font-size: 1.2 rem; color: #fff; text-align: center; transition:.3s; }
.btn-primary:active { transform: scale(. 98); }.inp-bt { display: block; box-sizing: border-box; width: 90%; height: 2.5 rem; padding:.3rem; margin: 0 auto; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; }
.sticky-bt.intop { bottom: auto; top: 0; }
/*dpi*/
/* for 1080+ px width screen */
@media only screen and (min-width: 1080px) {html.body { font-size: 51.67 px.; }}/* for 1080 px width screen */
@media only screen and (max-width:1080px) {
html.body { font-size: 45px; }}/* for 800 px width screen */
@media only screen and (max-width:800px) {
html.body { font-size:33px; }}/* for 720 px width screen */
@media only screen and (max-width:720px) {
html.body { font-size:30px; }}/* for 640 px width screen */
@media only screen and (max-width:640px) {
html.body { font-size: 27px; }}/* for 540 px width screen */
@media only screen and (max-width:540px) {
html.body { font-size: 22.5 px.; }}/* for 480 px width screen */
@media only screen and (max-width:480px) {
html.body { font-size: 20px; }}/* for 450 px width screen */
@media only screen and (max-width:450px) {
html.body { font-size: 18.9 px.; }}/* for 414 px width screen */
@media only screen and (max-width:414px) {
html.body { font-size: 17.25 px.; }}/* for 375 px width screen */
@media only screen and (max-width:375px) {
html.body { font-size: 15.625 px.; }}/* for 320 px width screen */
@media only screen and (max-width:320px) {
html.body { font-size: 13.5 px.; }}
Copy the code
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no, email=no"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="sticky-bt intop">
<input class="inp-bt" placeholder="Input text" type="text"/>
</div>
<div class="wrapper"><! --container-->
<div class="intro-detail">
<div class="modal">
<div class="cont-md">
<h2 class="tit">Diagram execution environment, scope, closure</h2>
<div class="lead">
<p>The first thing we need to know is that there are three concepts,<br/>Execution environment, scope chain, variable object</p>
<p>When I start executing the js code above,<br/>The global execution environment is pushed, with variable objects associated with the execution environment,<br/>As the code executes in the environment, it creates a scope chain of variable objects</p>
</div>
</div>
</div>
<div class="modal">
<div class="cont-md">
<h2 class="tit">Diagram execution environment, scope, closure</h2>
<div class="lead">
<p>After the normal function completes, its execution environment is pushed out of the environment stack,<br/>The current environment returns to the global execution environment.<br/>The active object (variable object) created when the normal function is executed<br/>It is destroyed (there is no pointer to it,<br/>Garbage collection will reclaim it, freeing memory).</p>
</div>
</div>
</div>
<div class="modal">
<div class="cont-md">
<h2 class="tit">Diagram execution environment, scope, closure</h2>
<div class="lead">
<p>The first thing we need to know is that there are three concepts,<br/>Execution environment, scope chain, variable object</p>
<p>When I start executing the js code above,<br/>The global execution environment is pushed, with variable objects associated with the execution environment,<br/>As the code executes in the environment, it creates a scope chain of variable objects</p>
</div>
</div>
</div>
<div class="modal">
<div class="cont-md">
<h2 class="tit">Diagram execution environment, scope, closure</h2>
<div class="lead">
<p>After the normal function completes, its execution environment is pushed out of the environment stack,<br/>The current environment returns to the global execution environment.<br/>The active object (variable object) created when the normal function is executed<br/>It is destroyed (there is no pointer to it,<br/>Garbage collection will reclaim it, freeing memory).</p>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-bt">
<input class="inp-bt" placeholder="Input text" type="text"/>
</div>
<script>document.body.addEventListener('touchstart'.function () {});</script>
</body>
</html>
Copy the code(Scan code to view page effect)
The solution is to put everything except the Fiexed layer inside div.Container and add the following styles. The entire body is set to 100% height and does not scroll, only scrolling for the content div itself.
.container{
position: relative;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}Copy the codeExample: demo.zhangruojun.com/static/page…
/* * @author: zhangruojun; * @design: ; * @update: 2016-05-24; * /
/*reset*/
body.dl.dd.h1.h2.h3.h4.h5.h6.p.form { margin: 0; }
ol.ul.input {margin: 0; padding: 0; }
ol.ul { list-style: none; }
body { -webkit-font-smoothing: antialiased; font-family: Arial, DroidSansFallback, Helvetica, Tahoma, \5FAE\8F6F\96C5\9ED1, sans-serif, Sans; }
h1.h2.h3.h4.h5.h6.p { font-weight: normal; }
a.button.button:active.input { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -webkit-appearance: none; }
em.i { font-style: normal; }
a { text-decoration: none; }
img { border: none; }
input:focus { outline: none; }
/*rem = px / 30 */
html.body { position: relative; height: 100%; }
.page { overflow: auto; -webkit-overflow-scrolling: touch; }
.wrapper { position: relative; font-size: 0.8 rem; color: # 333; }
.container { position: relative; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; font-size: 0.8 rem; color: # 333; }
.intro-detail { padding-bottom: 4.77 rem; }
.modal { overflow: hidden; min-height: 20rem; }
.cont-md { padding: 3.0 rem 0 0 0; text-align: center; line-height: 1.6; white-space: nowrap; }
.cont-md .tit { font-size: 1.07 rem; line-height: 1.4; }
.cont-md .lead { margin: 1.0 rem 0 0 0; }
.intro-detail .modal:nth-child(1) { background-color: #f4f5f6; }
.intro-detail .modal:nth-child(2) { background-color: #d6dae3; }
.intro-detail .modal:nth-child(3) { background-color: #A9B0C5; }
.intro-detail .modal:nth-child(4) { background-color: #6D789D; color: #fff; }
.sticky-bt { display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; justify-content: center; -webkit-justify-content: center; }
.sticky-bt { position: fixed; left: 0; right: 0; bottom: 0; height: 4.77 rem; background-color: rgba(0, 0, 0, 5);z-index: 10; }
.btn-primary { display: block; width: 20.1 rem; height: 2.93 rem; line-height: 2.93 rem; border-radius: 2.93 rem; margin: 0 auto; background: #4D5572; font-size: 1.2 rem; color: #fff; text-align: center; transition:.3s; }
.btn-primary:active { transform: scale(. 98); }.inp-bt { display: block; box-sizing: border-box; width: 90%; height: 2.5 rem; padding:.3rem; margin: 0 auto; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; }
.sticky-bt.intop { bottom: auto; top: 0; }
/*dpi*/
/* for 1080+ px width screen */
@media only screen and (min-width: 1080px) {html.body { font-size: 51.67 px.; }}/* for 1080 px width screen */
@media only screen and (max-width:1080px) {
html.body { font-size: 45px; }}/* for 800 px width screen */
@media only screen and (max-width:800px) {
html.body { font-size:33px; }}/* for 720 px width screen */
@media only screen and (max-width:720px) {
html.body { font-size:30px; }}/* for 640 px width screen */
@media only screen and (max-width:640px) {
html.body { font-size: 27px; }}/* for 540 px width screen */
@media only screen and (max-width:540px) {
html.body { font-size: 22.5 px.; }}/* for 480 px width screen */
@media only screen and (max-width:480px) {
html.body { font-size: 20px; }}/* for 450 px width screen */
@media only screen and (max-width:450px) {
html.body { font-size: 18.9 px.; }}/* for 414 px width screen */
@media only screen and (max-width:414px) {
html.body { font-size: 17.25 px.; }}/* for 375 px width screen */
@media only screen and (max-width:375px) {
html.body { font-size: 15.625 px.; }}/* for 320 px width screen */
@media only screen and (max-width:320px) {
html.body { font-size: 13.5 px.; }}
Copy the code
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no, email=no"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="sticky-bt intop">
<input class="inp-bt" placeholder="Input text" type="text"/>
</div>
<div class="container"><! --wrapper-->
<div class="intro-detail">
<div class="modal">
<div class="cont-md">
<h2 class="tit">Diagram execution environment, scope, closure</h2>
<div class="lead">
<p>The first thing we need to know is that there are three concepts,<br/>Execution environment, scope chain, variable object</p>
<p>When I start executing the js code above,<br/>The global execution environment is pushed, with variable objects associated with the execution environment,<br/>As the code executes in the environment, it creates a scope chain of variable objects</p>
</div>
</div>
</div>
<div class="modal">
<div class="cont-md">
<h2 class="tit">Diagram execution environment, scope, closure</h2>
<div class="lead">
<p>After the normal function completes, its execution environment is pushed out of the environment stack,<br/>The current environment returns to the global execution environment.<br/>The active object (variable object) created when the normal function is executed<br/>It is destroyed (there is no pointer to it,<br/>Garbage collection will reclaim it, freeing memory).</p>
</div>
</div>
</div>
<div class="modal">
<div class="cont-md">
<h2 class="tit">Diagram execution environment, scope, closure</h2>
<div class="lead">
<p>The first thing we need to know is that there are three concepts,<br/>Execution environment, scope chain, variable object</p>
<p>When I start executing the js code above,<br/>The global execution environment is pushed, with variable objects associated with the execution environment,<br/>As the code executes in the environment, it creates a scope chain of variable objects</p>
</div>
</div>
</div>
<div class="modal">
<div class="cont-md">
<h2 class="tit">Diagram execution environment, scope, closure</h2>
<div class="lead">
<p>After the normal function completes, its execution environment is pushed out of the environment stack,<br/>The current environment returns to the global execution environment.<br/>The active object (variable object) created when the normal function is executed<br/>It is destroyed (there is no pointer to it,<br/>Garbage collection will reclaim it, freeing memory).</p>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-bt">
<input class="inp-bt" placeholder="Input text" type="text"/>
</div>
<script>document.body.addEventListener('touchstart'.function () {});</script>
</body>
</html>
Copy the code(Scan code to view page effect)
Fixed in IFrame is invalid in ios
If there is an iframe embedded in our page, and there is a fixed floating layer in the iframe page, we will find that Fixed is invalid when we check the page under ios.
Example: demo.zhangruojun.com/static/page…
(Scan code to view page effect)
The bottom button float is not fixed at the bottom of the screen, but at the bottom of the page.
This is a bug on ios, but not on Android.
Once again, place the contents of the fiexed layer inside div.container and add the following styles:
{
position: relative;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}Copy the codeDemo.zhangruojun.com/static/page…
(Scan code to view page effect)
Third, 1 and 2 summary
Set the HTML,body height to 100%, put the page content in the container of 100% height, scroll not in the body, put in the child container, and then fixed layer as its sibling.
4. Under some Android models
On some Android models, fixed input at the bottom will be blocked by the pop-up soft keyboard.
Instead of putting input inside the fixed layer, interact with it in a different way.
Original address: zhangruojun.com/iframeli-de…
Article reprinted from other websites