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

i'm little bit confused how fluid layouts, screen resolutions , how twitter bootstrap works.

i'm in ages of the site mocking.

so have done far looks reasonably on desktop.

when resize size of window in chrome, layout adapts pretty (though no perfect).

what confuses me when browsed iphone ad ipod touch, rendered semi broken version of big desktop rendering:

i know can use media queries affect css of particular screens individually this:

/* large desktop */ @media (min-width: 1200px){  }  /* portrait tablet landscape , desktop */ @media (min-width: 768px) , (max-width: 979px) {   }  /* landscape phone portrait tablet */ @media (max-width: 767px) {  }  /* landscape phones , down */ @media (max-width: 480px) {  } 

but shouldn't iphone show me same thing see when reduce window size manually in desktop?

you can see live version of site here.

you need define initial viewport size mobile browser:

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

read more @ http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html