Bootstrap背景图片无法在iPhone上调整大小

Question

I have created a website that is close to completion using Bootstrap.The problem I am having is that on a desktop or android device it looks great and works as planned. However, on Iphone the background image doesn't shrink to fit the display. The site uses Cascade scrolling.

www.mabmetalworks.com

I suspect it has something to do with the iphone being a retina display ?

Can you take a look at my code below please and advise how I rectify it to work with 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

There is also a class specific for images.

<img class="img-responsive">

You can try this one out. I don't if this is your answer.

Link to article : http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp