Jump to content

Fixed element messing everything up when you zoom on a mobile device


jpf566

Recommended Posts

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

initial.png

 

Zoom in and things get ugly

zoom.png

Edited by jpf566
Link to comment
Share on other sites

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

 

 

whitebg.png

Edited by jpf566
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...