fixed width div coming smaller size in iPhone when set background image to body

Question

I want to display a static page which has a div on its center and an image set to its body background. For setting body background I am using the below piece of code:

body
   {
       background: url('Images/background_landing.jpg') center center fixed;
       background-repeat:no-repeat;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
   } 

and the below piece of code I am using for div inside my body

#popContent
{
 z-index:1;
 width:550px;
 background-color:White;
 height:600px;
 margin:0px auto;
 position:relative;
 top:20px;
 left:0px;       
}

and I am using bootstrap to make the page responsive. For desktop and tablet its working fine but when I tested in iPhone its(div) coming very small though I have set a fixed width for that div and media query is not working also. please advise me to come across from this situation.

Thanks for your time

Answer 1

Do you use the meta tag to disable zooming on iphone?

<meta name="viewport" content="width=device-width, user-scalable=no">

If no, try to put it in. Iphone has a very dense pixel-ratio which means that the div has to be 640px to fill the screen. If that does not work please post the html and the css code with the media queries.