修复了在移动设备上缩放后背景图像跳转的问题

Question

我尝试了很多！但我认为我的问题比其他已解决的问题更特别：

这是侧面： fruehstarter.com

我在移动设备上遇到了背景问题。 我的客户想要一个特殊的背景，它固定为 100% 的宽度和高度。在移动设备上，您需要放大以识别内容。 但是，如果您向下滚动并且浏览器行消失，背景图像会因为新的高度而跳跃。

要么我有跳跃的背景，要么我在浏览器行的高度边的末端有一个白色边框。

希望你能理解我的问题并能帮助我。非常感谢！

编辑：我尝试过的：

background:cover not scaling on mobile browsers

Background image jumps when address bar hides iOS/Android/Mobile Chrome

我试图给我的 div “.bg” 和 “.container-fluid” 另一个位置（更改为“absolute” 和 “relative”）或者给另一个 div 作为背景。

编辑第二次：

代码如下：jsfiddl

HTML:
 <div class="container-fluid">
  <div class="bg"></div> 
   <div class="row">
    <div class="linkbox"></div>
   </div>
 </div>

CSS:

 html {
  font-size: 10vh;
  height: 100%;
  font-family: 'Titillium Web', sans-serif;
 }

 body {
  -webkit-overflow-scrolling: touch;
  min-height: 100%;
  width: 100%;
  position: relative;
 }

 .container-fluid {
  height: 100%;
  overflow-x: hidden;
  position: absolute;
  width: 100%;
 }

 .row {
  height: 100%;
  position: relative;
 }

 .bg {
  overflow: hidden; 
  position: fixed; 
  width: 100%;
  height: auto;
  min-height: 10rem;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: -15px;
  margin-right: -15px;
  z-index: -1; 
  background: url('http://fruehstarter.com/wp- content/themes/fruehstarter/library/images/fs_klingelschildMobil6.jpg') no-repeat;
  background-size: cover;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-position: center center;
  background-attachment: fixed;
 }

JAVASCRIPT:

 jQuery(document).ready(function () {
  if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android)/g)) {
    $('html').css('font-size', Math.ceil($(window).height() / 10));
    $('.bg').css('overflow-y', 'scroll');
    $('body').scrollTop(1);
  }
 }

Answer 1

分享您的代码会很有帮助。

我觉得

background-attachment: fixed; 

另外是您正在寻找的。​​p>

例子：

background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;

更新

试试这个：

     body {
         background: url('http://fruehstarter.com/wp- content/themes/fruehstarter/library/images/fs_klingelschildMobil6.jpg') no-repeat;
         background-size: cover;
         -webkit-background-size:cover;
         -moz-background-size:cover;
         -o-background-size:cover;
         background-repeat: no-repeat;
         background-position: center;
         background-attachment: fixed;
     }

我认为在你的情况下定义身体内部的背景更舒服。