jpf566 Posted June 19, 2012 Report Share Posted June 19, 2012 (edited) 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 Edited June 19, 2012 by jpf566 Quote Link to comment Share on other sites More sharing options...
jpf566 Posted June 19, 2012 Author Report Share Posted June 19, 2012 (edited) UPDATE: Ok I've found out how to control scaling using <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 Edited June 19, 2012 by jpf566 Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 19, 2012 Report Share Posted June 19, 2012 I'm just guessing here, never worked with such an issue - but the navigation and the images enlarge on zoon, but something has to 'allow' the overlap to happen here. Maybe something in the CSS for these divisions - are is one floating? Do you have a link to the actual page? Disabling zoom is not a good idea - people with poor eyesight may need to see things larger. Quote Link to comment Share on other sites More sharing options...
jpf566 Posted June 19, 2012 Author Report Share Posted June 19, 2012 sheffieldfurniture.com/furniture/bedroom.html Here's the actual page, the reason it's overlapping is because it's a fixed position div Quote Link to comment Share on other sites More sharing options...
Wickham Posted June 20, 2012 Report Share Posted June 20, 2012 (edited) Try Media Queries Responsive Layout which will keep your a fixed width at certain viewport widths (for desktops and laptops) but make it fluid for small screen devices if you change it to a % width. See http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/ http://www.alistapart.com/articles/responsive-web-design/ I also have a menu on the left with position: fixed and a fixed width and it works OK in a responsive layout because the media queries makes the content drop down below the menu. Media Queries will totally alter your layout so that only vertical scrolling is necessary if you do it correctly (plus some zoom to get the best size for reading text). Images need to be max-width: 100%; set the size you want for the desktop image in the actual image file initially, don't resize with CSS. It will depend on how you have coded your page, but you should be able to get it to show the menu above the images below a certain "break point". The images shrink in width and height in proportion but stay side by side on one line until the viewport gets too narrow; then all the menu items and all the images will be in a vertical arrangement. Edited June 20, 2012 by Wickham Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.