+ 4

How to prevent fixed positioned object/element (mainly images) from moving when zooming your webpage?

I'm a beginner needed help.

27th Aug 2017, 6:01 AM

Feelc

6 Answers

+ 8

You cannot... and this is logical, as "fixed" display property was designed for a totally different purpose: prevent element from moving when SCROLLING. About zooming, you can no more use JS as workaround, because there's no way to handle zoom (neither read some actual value of uzer zoom nor set it to a specific value -- as it's possible for scrool handling). The only thing doable is to prevent user zoom through the use of <meta name="viewport"> in the <head> part of your html, such as: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ... but this will only work on mobile zoom (desktop browsers continue to zoom if they have this feature) for better (do a search on google about 'disabling zoom', you will find different form for 'content' to obtains expected result, but visibily, not always with all mobile browsers ^^

27th Aug 2017, 8:12 AM

visph

+ 5

Try to put the <meta name="viewport"> tag in your <head> (but without the max and user-scalable properties): 'fixed' value for 'display' attribute is buggy on mobile devices, and adding the <meta> tag should fix it ;)

27th Aug 2017, 9:44 AM

visph

+ 4

<< But when I tried to apply it in my webpage and run it on a mobile browser the whole page seems to zoom in intensively. Does this mean I'm making it wrong the whole time and is outstandard? I always use the 'px' unit in my css code. >> Yes, if you use 'px' unit, you define fixed size, so the <meta> related to viewport will disable default behavior of mobile devices which try to make fit old site build for desktop in mobile screens (usually smaller, with less definition -- pixels)... Even with high resolution small display, because internally they try also to adapt to content not still designed for high resolution and to try to keep readability and for that use virtual pixels, so your css 'px' unit is really one pixel in desktop, but could be 1, 1.5, 2... and so on in mobile... https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

27th Aug 2017, 11:59 AM

visph

+ 2

@visph It's just that I have that problem when zooming my webpage all of the elements is doing fine and remain intact except my fixed positioned background-image of the header seems broken everytime I zoom-in. Though I'll just don't mind it now as there's no workaround for that unless disabling the zoom. BTW, thanks a lot man!

27th Aug 2017, 9:41 AM

Feelc

+ 1

@visph I have one more question. 😁 As I have noticed, like almost webpage I see they put: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> But when I tried to apply it in my webpage and run it on a mobile browser the whole page seems to zoom in intensively. Does this mean I'm making it wrong the whole time and is outstandard? I always use the 'px' unit in my css code. PS: I made the code from a desktop view.

27th Aug 2017, 11:48 AM

Feelc

+ 1

Okay I'll take note of that. Such great help. Thanks bro :)

27th Aug 2017, 12:36 PM

Feelc