由于移动网络上的文字输入功能开启了键盘，因此忽略或停用移动视口调整大小？ [英] Ignore or disable mobile viewport resize due to keyboard open for text inputs on mobile web?

问题描述

我对自适应背景图片使用这种仅限CSS的策略和自适应背景图片和包含内容 ...我用于背景和内容的设置类型示例： / p>

I'm using this CSS-only strategy for responsive background images and responsive background image and contained content ... an example of the type of setup I'm using for background and 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;
}

我编辑了上述代码，只包含内容的样式。点击上面的链接查看完整的策略和风格。

I edited the above code to just include the styles for the content. Click the link above to see the full strategy and styles.

主页我基本上是一个标志，文本输入与内联按钮，下面的登录按钮。标志和登录按钮都是绝对定位的。

The main page I'm working on essentially a logo, text input with inline button, and login button below. Both the logo and login button are positioned absolutely. Everything looks great on a mobile device.

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

The problem occurs only if the user touches to input text. The keyboard shrinks the viewport and therefore, the background image, squishing and overlapping all the contained content.

有人知道如果有一种方法可以禁用视口调整大小当键盘在移动设备上打开？有没有一种方法可以实现这个没有移动jQuery？

Does anyone know if there's a way to disable the viewport resize when the keyboard is opened on mobile devices? And is there a way to accomplish this without mobile jQuery?

推荐答案

通常如果你不使用Jquery移动，手动修复所有来自不同手机操作系统的bug。如果你想跳过这个库，你必须监听viewport resize change事件，通过监听它获得视口的剩余高度和宽度。

Usually if you do not use Jquery mobile then you will have to manually fix all the bugs coming with different phone OSs. If you want to skip this library you will have to listen to viewport resize change event and through listening to it get the remaining height and width of the viewport.

根据视口变化触发函数

$(window).resize(function() 
{

});

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

and inside that get the viewport width height and then adjust the layout accordingly.

$(window).resize(function() 
{

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

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

   //do your layout change here.

});

这篇关于由于移动网络上的文字输入功能开启了键盘，因此忽略或停用移动视口调整大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！