Question

我正在为responsive background images和responsive background image and contained content使用这种仅限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

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

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

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

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

3 个答案: