html - Bootstrap 背景图像无法在 iPhone 上调整大小

Question

我使用 Bootstrap 创建了一个即将完成的网站。我遇到的问题是，在桌面或 Android 设备上它看起来很棒并且按计划工作。但是，在 Iphone 上，背景图像不会缩小以适合显示屏。该站点使用级联滚动。

www.mabmetalworks.com

我怀疑这与 iphone 是视网膜显示屏有关吗？

你能看看我下面的代码并建议我如何纠正它以与 iPhone 一起工作吗？

<div id="home" class="home">
  <div class="text-vcenter">
   <h1>MAB Metal Works</h1>
   <h3 class = "H2">Your Local Steel Company</h3>
   <a href="#about" class="btn btn-default btn-lg">Continue</a>
   </div>
 </div>

 #home {
 background: url(../images/main.jpg) no-repeat center center scroll; 
 display: table;
 height: 100%;
 position: relative;
 width: 100%;
 max-width: 100%;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 }

Answer 1

还有一个特定于图像的类。

<img class="img-responsive">

你可以试试这个。如果这是你的答案，我不知道。

文章链接:http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp