A Meta Viewport Initial-Scale-Only Mobile Friendly Technique
Created 2011 February 26. Modified 2011 March 29.
To cut to the chase, rather than:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Use:
<meta name="viewport" content="initial-scale=1.0" />
By deliberately not setting the width property and setting the initial-scale property to 1, the Layout Viewport width becomes the Visual Viewport width. Or at least that's my understanding of what happens.
In the case of an iPhone the Layout Viewport width becomes 320 in portrait and 480 in landscape. And width and device-width media queries work as expected like on a desktop browser.
Feedback on real or other devices would be fab. So far I've only been able to test on the iPhone and iPad iOS Simulator.
One downside to report: When changing from portrait to landscape on iOS, the Visual Viewport doesn't zoom out to show the complete Layout Viewport. That said, a quick pinch sorts it out.
Update: Turns out this is the same even if using width=device-width. See iOS bug report and test page (Scott Jehl filamentgroup.com), thanks to Andy Clarke pointing it out on 320 and Up (stuffandnonsense.co.uk).
The same meta viewport is given on Meta Viewport Properties (developer.apple.com) but the explanation given doesn't shed much light:
To set the initial scale to 1.0, add this to your HTML file:
<meta name = "viewport" content = "initial-scale = 1.0">To set the initial scale and to turn off user scaling, add this to your HTML file:
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
Here is the definition of the initial-scale property from the same page:
initial-scale:
The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined by the minimum-scale and maximum-scale properties. You can set only the initial scale of the viewport—the scale of the viewport the first time the webpage is displayed. Thereafter, the user can zoom in and out unless you set user-scalable to no. Zooming by the user is also limited by the minimum-scale and maximum-scale properties. Available in iOS 1.0 and later.
On iOS the default Layout Viewport is set to 980 wide and the Visual Viewport zooms to fit. The issue with this is that a site can seem far away.
The Meta Viewport Width Property offers a way around this and has two value types:
<meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width">
The first is a pixel width and the second is 'device-width', which is a variable that refers to the width of the device.
Using a pixel width has a problem that it doesn't take into account the various sizes of devices and their orientations. A 480 Layout Viewport on an iPad or similar would waste screen space available on the device. Scripting can come to the rescue here by setting widths according to the device. But if possible a solution that doesn't rely on scripting would be preferable.
Using 'device-width' would be perfect except iOS devices give the same width whether in landscape or portrait orientations, 320 on an iPhone. Not a big issue and a great solution if the method on this page is not working out.
It would be even better if we didn't have to rely on a meta element at all, but for the moment it does the trick.
So, the method outlined was found out of curiosity and desire for a simpler solution. Hopefully, it will work for more than just iOS devices too.