directory

  1. Input gets focus, the page is magnified
  2. Blank screen for ios input
  3. The soft keyboard can’t hold up the page
  4. The ios page does not scroll smoothly
  5. Position: Fixed/Absolute Scroll with the screen

1. Input Gets focus, the page is enlarged

Setting meta Tags

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Copy the code

2. Blank screen for ios input

This problem seems to have been solved only in ios9 by adding relative positioning to the parent element of the input, which is pretty amazing, because it’s not clear what’s going on.

style="postion:relative;"
Copy the code

3. The soft keyboard can’t get off the page

There are currently two approaches:

(1) JS control focus blur
// Input input box pop-up soft keyboard solution. var bfscrolltop = document.body.scrollTop; $("input").focus(function () {
  document.body.scrollTop = document.body.scrollHeight;
}).blur(function () {
  document.body.scrollTop = bfscrolltop;
});
Copy the code
(2) (to be verified 0.0)
position: absolute; webkit-overflow-scrolling: touch; z-index:1; Control the blur again / / js / / slide down to page 500 document. Body. AddEventListener ('focusout'.function{() the window. The scrollTo (0500); })Copy the code

4. The ios page does not scroll smoothly

My solution is to leave the HTML and body fixed at 100% (or 100vh), then put a height:100% div inside and set overflow-y: auto; And – its overflow – scrolling: touch;

.h100Scroll {/* Divs like modal frames cannot be placed in this container */ height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }Copy the code

5. Position: fixed/absolute with the scroll

Note: Fixed is not supported in ios. Position :fixed/absolute: position:fixed/absolute

-webkit-transform: translateZ(0);
Copy the code

In case of jitter, in the content area, add:

overflow-y: auto;
Copy the code