Alright, so I'm implementing a “fixed floating menu” that you can see here http://jqueryfordesigners.com/fixed-floating-elements/

Here's the page sheffieldfurniture.com/furniture/bedroom.html

It works great on desktop and looks great on mobile devices (IOS, Android) ...as long as you don't zoom in on the page. When you zoom on a mobile device the fixed element begins covering the other page content, as it should since it's fixed to a certain place on the viewport.

Is there a way to keep users from zooming? Any ideas? Thanks!


See below for screen shots.

Initial view is fine


Zoom in and things get ugly

I'm not a big fan of preventing zoom but sometimes you just need to because of the circumstances. So...
If I'm correct, on some Androids you can't prevent the zoom. But in general this will work on most phone (but not all):

Use this meta tag and place it within your head tag section:
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />

Ok cool, Thanks! Yeah I was able to control scaling with this

<meta name = "viewport" content = "initial-scale = .25, minimum-scale = .25, maximum-scale= .25, width = device-width">

but now now that I look at it, it's really tiny and annoying not being able to scale.


My second idea was to use this meta tag to restrict scaling to a certain extent and then make the background of the menu div white so it then becomes a sort of fixed menu overlay. (See screenshot below) Does anyone have a better idea? Also, when I tested this on IOS devices the menu was floated toward the center/middle of the screen and was much more awkward and distracting. Any ideas/advice would be much appreciated! Thanks

This is a very good article that explains the scaling issue. When the initial scale is reduced to .25, 1280 pixels are displayed. Just something to think about:
http://johnkpaul.tumblr.com/post/186...-with-pictures