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

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.

});

Answer 2

如果有人实际上对 jQuery 解决方案感到满意：

jQuery(document).ready(function() {
var viewportWidth = jQuery(window).width();

    jQuery(window).resize(function(){
        var viewportWidthResized = jQuery(window).width();
    
        if (viewportWidth !== viewportWidthResized) {
            // do the work
            viewportWidth = viewportWidthResized;
        }
    });
});

Answer 3

我创建了自己的解决方案，这对我很有帮助，可能对其他人有用:)

想法是保存初始高度，然后用它代替

100vh

在

CSS

中我创建了一个变量：

:root {
  --device-height: 100vh;
}

然后在

JS

我刚刚写道：

document.documentElement.style.setProperty('--device-height', window.innerHeight + 'px');

现在每当我需要

vh

时我都会使用：

some_query {
  height: var(--device-height);
}

或

some_query {
  --vh: 50;
  height: calc(var(--device-height) * var(--vh) / 100);
}

我知道它看起来使用起来非常复杂

calc

，但现在很多人使用CSS预处理器，它允许创建

functions/mixins

，这样你就可以简化它。例如在

SCSS

我写了这个：

@mixin height-vh($size) {
    height: calc(var(--device-height) * $size / 100);
}

然后像这样使用它：

@include height-vh(50);

当然这不是一个完美的解决方案，因为如果水平调整窗口大小，至少它不会正常工作，因为它将使用旧的高度值

Answer 4

看起来您可以简化 HTML/CSS，这可能会解决您的问题。

为什么不直接添加背景图像内容，然后删除所有这些额外的标签。忘记设置您的视口元标记。我总是从这个开始，然后根据需要更改它。

https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html