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

最新推荐文章于 2024-05-31 11:18:39 发布

yangqii

最新推荐文章于 2024-05-31 11:18:39 发布

阅读量1.6k

点赞数 3

文章标签： ios html5 css

本文链接：https://blog.csdn.net/yangqii/article/details/119945868

版权

问题描述：

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.userAgent
    let 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)
    }
}