IOS唤起键盘，移动端页面放大

问题描述：

ios 点击 input\textarea 输入框唤起键盘后，页面放大且不容易恢复原样

解决：

html header 头部加入 meta 声明

其实这句是写移动端页面必备的，禁止页面放大缩小，草率了。。。

扩展：

1、 ios的select、input、样式显示的跟安卓不一样，可以用-webkit-appearance:none

2、阻止ios软键盘将页面顶上去无法恢复的问题

html代码如下:
<input type="text" class="text" onblur="inputBlur()">function inputBlur(){let u = navigator.userAgentlet isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)if (isIOS) {setTimeout(() => {const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;window.scrollTo(0, Math.max(scrollHeight - 1, 0))}, 200)}
}

博文参考：

vueiOS移动端点击input框页面放大问题

iOS点击输入框，界面放大解决方案

iOS手机Input、Textarea 唤起键盘页面偏移和放大的解决方法

IOS唤起键盘，移动端页面放大相关推荐

IOS唤起键盘后--导致页面底部空白问题
场景: 在写微信项目的时候, 经常会遇到一些表单项.对于移动端项目,input(输入框)聚焦时,都会唤起设备键盘,内容输入完成,点击 "完成" 按钮,设备键盘消失,页面正常显示. ...
ios唤起键盘后，页面不收回导致元素错位的问题.（譬如固定在底部的自定义键盘等）...
解决办法 var u = navigator.userAgent; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 // ...
在mac上如何用safari调试ios手机的移动端页面
步骤如下: 第一步:打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器] ,如图1.图2 图2 第二步:打开Mac上Safari ...
解决微信H5页面软键盘弹起后页面下方留白的问题（iOS端）
解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) 参考文章: (1)解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) (2)https://www.cnblogs.com/zouw ...
Vue中输入框自动获取焦点-移动端ios不能唤起键盘解决办法
实现自动唤起键盘方式一(推荐) this.$nextTick(() => {this.$refs.input.focus() })方式二 setTimeOut(()=>{this.$re ...
vant 软键盘_移动端页面输入底部被软键盘遮挡问题
概述近期有个移动端页面的项目,存在需要用户输入的表单信息.因为页面不存在滑动(通过overflow设为hidden的方式),所以在点击input标签输入信息时,在安卓机下键盘会遮挡页面底部内容,当点 ...
移动端兼容如：背景图片、页面放大、卡顿、闪退、内阴影
1.安卓浏览器看背景图片,有些设备会模糊因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,安卓手机devicePixoRadio比较乱,有1.5的,有2的也有3的.想让图片在手机里显示更为清 ...
处理ios软键盘弹起和收起时页面滚动问题
处理ios软键盘弹起和收起时页面滚动问题背景: 在开发添加主播功能时,页面底部需要弹出一个抽屉弹窗,点击抽屉上的输入框,会唤起软键盘,由于iOS的软键盘触发方式是将页面滚动,所以导致页面位置偏移 b ...
移动端键盘收起，页面没能恢复原状的解决方案
问题1 // 优化移动端键盘收起时页面没能恢复原状的问题 let inputs = document.getElementsByTagName('input'); let timer = null; ...
ios 键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案
ios 微信键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案问题:测试发现ios微信端浏览器中,键盘弹出后,输入框被软键盘遮挡,input失焦后,因软键盘顶起的页面没有回弹到原来位置, ...

IOS唤起键盘，移动端页面放大

博文参考：

IOS唤起键盘，移动端页面放大相关推荐

最新文章

热门文章