相关疑难解决方法(0)

软键盘打开时获取视口高度

我一直试图让这项工作好几天,没有运气,所以我想我会分享信息,也许有人想出一个解决方案.

我想在软键盘启动时获得确切的视口大小.我目前在标题上使用以下代码,以便网站响应:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
Run Code Online (Sandbox Code Playgroud)

我意识到当软键盘出现时,它使用设备高度作为视口高度并向上推动站点的其余部分 - 这使我认为它从width = device-width选项获得它的高度.

启动软键盘后使用以下代码:

setTimeout(function() {  
    viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'height=auto');
}, 300)
Run Code Online (Sandbox Code Playgroud)

然后使用jquery获取高度在Android上显示CORRECT结果 - 也就是可见的视口大小,没有虚拟键盘,但在iOS上没有.我得到一个随机数,我假设源于其余的元标记不存在,所以我得到了网站的放大版本以及75或100之类的数字(在iphone 4s上)

我也尝试在键盘上升后创建一个固定元素,使其使用top:0的视口高度; 和底部:0; 属性,但我仍然得到原始的高度.

更接近这一点的是将视口元标记高度设置为固定值,可以通过jquery获取$(window).height(),这意味着元标记在启动键盘后实际上有所不同,但是对于固定的没有真正的价值高度.

我已经看到很多关于此的主题,但没有一个解决方案.有解决方案吗?

css jquery viewport ios

27
推荐指数
4
解决办法
4万
查看次数

标签 统计

css ×1

ios ×1

jquery ×1

viewport ×1