Best method to determine if viewport or 'standard' browser

Question

So, by now we all know that iOS mobile Safari uses viewports (as does Android browser), rather than a 'standard' browser window. And this causes issues with overflow:hidden, and position:fixed.

This unfortunately is the same case with the iPad. I presume this is the case for other Android tablets too.

Rather than browser sniffing each time, is there an easy way to determine if the browser has a viewport or if it is standard?

Answer 1

Unfortunately, there's currently no good fix for mobile browsers' lack of support for position:fixed. The reason position:fixed is "broken" in the first place is because—among other things—no browser vendor knows exactly how to handle what happens when zooming in on the document. If you have some time to do some reading, I highly recommend the following articles, which will explain browser viewports and the problems surrounding fixed positioning on mobile in great, painstaking detail:

• A tale of two viewports – part two — how viewports work and the problem of mobile browsers. (If you're not familiar with viewports in desktop browsers or want the background info, see also part one.)
• The fifth position value does a fantastic job of explaining the problems surrounding position:fixed in a mobile browser, and suggests we might need a new position value – device-fixed.

Those articles will give you the why, but not the how to fix it. For a truly fixed position, you're mostly out of luck. However, if your goal is to have a fixed toolbar below scrolling content, there are a few ways to hack it. I've had success with iScroll.

---

Edit: The correct way to determine if you are running on a touch-based device is the following feature detection:

var isTouch = ('ontouchstart' in window);

ontouchstart is an event fired in mobile Safari and the Android browser. It is not present on desktop browsers, where you can just use overflow:auto and have regular scrollbars. If isTouch is true, you can then use iScroll.

Answer 2

Try media queries: you can include stylesheets, or apply parts of a stylesheet conditionally, based on the device and viewport dimensions the browser reports.

This article gives a decent enough introduction: http://www.alistapart.com/articles/responsive-web-design/