我正在使用这种仅限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;
}
Run Code Online (Sandbox Code Playgroud)
我编辑了上面的代码,只包含内容的样式.点击上面的链接查看完整的策略和样式.
我正在处理的主要页面基本上是一个徽标,带有内联按钮的文本输入和下面的登录按钮.徽标和登录按钮都是绝对定位的.移动设备上的一切看起来都很棒.
仅当用户触摸输入文本时才会出现此问题.键盘缩小视口,因此缩小背景图像,压缩和重叠所有包含的内容.
有没有人知道在移动设备上打开键盘时是否有办法禁用视口调整大小?有没有办法在没有移动jQuery的情况下实现这一目标?
I'm making a website with 3 drawers - elements that are absolutely positioned off screen, one on the left, one on the right and one on the bottom.
Have a look at the website here to see what I'm talking about https://sjbuysse.github.io/javascriting/index.html
Click on the bottom Pop up! toggle, and you'll see a div with some inputs show up. As usual, when you click on one of these inputs in your mobile browser, a keyboard is displayed, which in result …