由于键盘打开移动网络上的文本输入,忽略或禁用移动视口大小调整？

Question

我正在使用这种仅限CSS的策略来响应背景图像和响应式背景图像以及包含的内容 ......我正在使用的背景和内容设置类型的示例:

<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;
}

我编辑了上面的代码,只包含内容的样式.点击上面的链接查看完整的策略和样式.

我正在处理的主要页面基本上是一个徽标,带有内联按钮的文本输入和下面的登录按钮.徽标和登录按钮都是绝对定位的.移动设备上的一切看起来都很棒.

仅当用户触摸输入文本时才会出现此问题.键盘缩小视口,因此缩小背景图像,压缩和重叠所有包含的内容.

有没有人知道在移动设备上打开键盘时是否有办法禁用视口调整大小？有没有办法在没有移动jQuery的情况下实现这一目标？

Answer 1

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

根据视口变化触发函数，如下所示

$(window).resize(function() 
{

});

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

$(window).resize(function() 
{

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

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

   //do your layout change here.

});