I have a posting form in my web app. On Android phone, When the contenteditable div is focused the soft keyboard pushes every other html elements up so it is good. However, on iPhone it does not do the same, but the keyboard just covers every other elements that are positioned in the bottom half of the screen. I built the page with vue.js and the code is as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">
<base href="/">
<title>iyf</title>
<style>html { scroll-behavior: smooth }</style>
</head>
<body>
<main class="posting">
<div class="creatingPost">
<div class="nav">
<button class="cancel">cancel</button>
<p class="title">create</p>
<button class="confirm">done</button>
</div>
<div class="contents">
<div class="text" contenteditable="true"></div>
</div>
<div class="wrapper">
<div class="previews">
<div class="photos">
</div>
<div class="location">
</div>
</div>
<div class="nav">
<div class="inclusions">
<input type="file"/>
<div class="upload-icon-photo" ></div>
<div class="upload-icon-video"></div>
<div class="upload-icon-location"></div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
