CSS Fixed Positioning and Mobile Zoom
The follow demo is a quick experiment! I’m not sharing code because it’s horrible and I don’t want emails asking if I’ve got it working on a Blackberry.
Mobile web browsers, unless otherwise informed, will assume a website has been designed for larger screens. They’ll render on a large canvas and zoom out. Responsive websites use the meta viewport tag to tell browsers: “Hey, render at the device width and don’t scale please.”
<meta name="viewport" content="width=device-width, initial-scale=1">
While the user no longer needs to zoom & pan they still have this ability should they desire it. It can effectively be disabled with the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
But this degrades accessibility for no good reason. Don’t do it.
A casualty of this set up is CSS fixed positioning. Though not often used to good effect, fixed navigation can be quite appealing on small screens where scrolling back up the the header is tedious. It’s more “app like”.
Screens 1 & 2 below show the navigation element fixed to the viewport as the page scrolls. Ignore the page content, those numbers were useful for debugging!
Screen 3 shows the disaster that is user zooming and fixed elements. Screen 4 shows my hack (what I hypothesised to be a more desirable result).
Technically what mobile browsers are doing is not a bug. It is the correct result but unfortunately not a nice one.
How my prototype works
After hacking together this prototype I’m not convinced this idea can be achieved to any working effect cross browser and I’m not going to pursue it further. On deeper consideration I’d say it’s best just to hide any fixed elements if the user zooms the main content.
Update: after Googling I see PPK on Quirks Mode gave this a shot a few years ago. I like his suggestion for
position: device-fixed or at least some kind of native CSS support.