The problem
When creating a responsive website using Twitter Bootstrap the layout does not act responsively on Safari running on the iPad or iPhone.
The solution
You need to add a meta tag to the head of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
So, what is going on here? Firstly the viewport meta tag was introduced to allow developers to control the “virtual viewport”.
“Mobile browsers like Fennec render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.
Mobile Safari introduced the "viewport meta tag" to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard.” [1]
The viewport meta tag above is using several properties. Firstly, there’s the width property:
“The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)” [1]
So, to set the viewport width to the width of the device you would add the following [2]:
<meta name="viewport" content="width=device-width">
Next there’s the initial-scale property:
“The initial-scale property controls the zoom level when the page is first loaded.” [1]
So, to set the ‘zoom level’ to 1.0 you’d add the following [2]:
<meta name="viewport" content="initial-scale=1.0">
And finally, the maximum-scale property:
“The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.” [1]
“The minimum-scale and maximum-scale properties also affect the behavior when changing orientations. The range of these property values is from >0 to 10.0. The default value for minimum-scale is 0.25 and maximum-scale is 5.0.” [2]
References
[1] Using the viewport meta tag to control layout on mobile browsers