Search code examples
jquerycsstwitter-bootstrapmobile-safariscreen-resolution

Shouldn't adapting the scree size of a fluid layout in the desktop show how the site should look for mobile?

I'm a little bit confused about how fluid layouts, screen resolutions and how twitter bootstrap itself works.

I'm in the early ages of the the site mocking.

So what I have done so far looks reasonably well on the desktop.

enter image description here

When I resize the size of the window in chrome, the layout also adapts pretty well (though no perfect).

enter image description here

What confuses me is that when I browsed from an iPhone ad iPod touch, it just rendered a semi broken version of the big desktop rendering:

enter image description here

I know you can use media queries to affect the css of the those particular screens individually like this:

/* Large desktop */
@media (min-width: 1200px){

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

}

/* Landscape phones and down */
@media (max-width: 480px) {

}

But shouldn't the iPhone show me the same thing I see when I reduce the window size manually in the desktop?

You can see a live version of the site here.

Solution

  • You need to also define an initial viewport size for the mobile browser:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Read more at http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html