Prevent That a Fixed Element Resizes When Zooming on Touchscreen

How to prevent zooming of an object with a fixed position on the iPhone (and other mobile devices)

I think this could solve your problem: http://davidwalsh.name/zoom-mobile-browsers

Disable zoom on a div, but allow zoom on the page (an alternate div)

You can't do that without clever hacks.

However, you can (and should) use the following CSS to fix zoom issues on mobile devices:

header {
    position: fixed;
    ...
}

@media only screen and (max-width: 720px) {
    header {
        position: absolute;
    }
}

This code enables position: absolute when display width is less or equal 720px, and header becomes the part of the page, rather than being fixed on top.

How to stop elements resizing when I change the zoom on page

Never mind guys, figured it out. I had to set a a bigger DIV as a parent and then change all the other elements to relative positioning so they wouldn't move about. It was a hassle, but it worked! :). Also, try to use pixels instead of % as percentages aren't fixed values and will cause stuff to go crazy when you zoom.

Prevent Mobile Browser Zooming of One HTML Element

The zoom mechanism varies across browsers and is not standardized, nor is it scriptable. Any solution would be pretty convoluted in order to work across browsers. There is no easy way to do this.

Can I stop the resizing of elements on zoom?

There's no way I know of to prevent items from scaling when a user zooms in. There may be a way to catch the zoom event and size elements accordingly, but it won't work in all browsers.

And to state the obvious - people zoom in because they can't read/see it at normal zoom. Pleeeaase don't break standard behaviour. It's there for a reason.

How do I stop a CSS layout from distorting when zooming in/out?

As this question still gets constant views, I'll post the solution I use currently.

CSS Media Queries:

@media screen and (max-width: 320px) { 

/*Write your css here*/

}

@media screen and (max-width: 800px) { 

}

Check out:
CSS-Tricks + device sizes and Media Queries

---

Related Topics