html - 由于在移动网络上为文本输入打开键盘而忽略或禁用移动视口(viewport)调整大小？

Question

我正在为 responsive background images 使用这个纯 CSS 策略和 responsive background image and contained content ...我用于背景和内容的设置类型示例:

<div class="fullscreen-cont">
    <div class="fullscreen-img"></div>
    <div class="cont-content-a">
        <div class="cont-content-b">
            Example content
        </div>
    </div>
</div>

.cont-content-a {
    display:table;position:relative;z-index:2;
    width:100%;
    height:100%;
}
.cont-content-b {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

我编辑了上面的代码以仅包含内容的样式。单击上面的链接查看完整的策略和样式。

我正在处理的主页基本上是 Logo 、带内联按钮的文本输入和下方的登录按钮。 Logo 和登录按钮都是绝对定位的。在移动设备上一切看起来都很棒。

仅当用户触摸输入文本时才会出现此问题。键盘缩小了视口(viewport)，因此缩小了背景图像，挤压并重叠了所有包含的内容。

有谁知道在移动设备上打开键盘时是否有办法禁用视口(viewport)调整大小？有没有一种方法可以在不使用移动 jQuery 的情况下实现这一目标？

Answer 1

通常，如果您不使用 Jquery mobile，那么您将不得不手动修复不同手机操作系统带来的所有错误。如果你想跳过这个库，你将不得不监听视口(viewport)调整大小更改事件，并通过监听它来获得视口(viewport)的剩余高度和宽度。

像这样根据视口(viewport)变化触发一个函数

$(window).resize(function() 
{

});

并在其中获取视口(viewport)宽度高度，然后相应地调整布局。

$(window).resize(function() 
{

   var viewportWidth = $(window).width();

   var viewportHeight = $(window).height();

   //do your layout change here.

});