Can I stop the resizing of elements on zoom?

Question

I have a standard website, and when the user zooms in (CTRL +), how can I prevent elements from resizing?

Is it just certain elements you want to disable the zoom for or do you want to prevent zooming for some elements? And are you sure this is the right solution to whatever problem you have. Zooming is intended to zoom in on things, disabling this may well be non-intuitive to users who are using the zoom functionality to zoom in on things... — Chris, Jun 23 '11 at 18:36
+1 interesting question, but I'm afraid the answer to the question before the "how" is "Can you prevent the browser zooming on (certain) elements?". I'm afraid the answer to that is "no" (but would love to see someone prove me wrong there :D) — Jeroen, Jun 28 '11 at 16:37
Well you should then checkout listen.grooveshark.com ! Try zooming in or zooming out — Suraj, Jul 01 '11 at 18:19
@tunetosuraj, grooveshark.com doesn't prevent the 'browser' from zooming. It just forces the user to reset to the default zoom. So, this doesn't disprove @Jeroen 's point — Diff.Thinkr, Jul 05 '11 at 10:07

score 28 · Accepted Answer · edited May 23 '17 at 12:22

28

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.

edited May 23 '17 at 12:22

Community

1
1

answered Jun 28 '11 at 17:51

Tak

11,428
5
29
48

agreed with @Charles. Standard behaviour is there for a reason. If there's a good reason for wanting to do this, I'd like to hear it. – Spudley Jun 28 '11 at 17:58
2

I have a fixed header element that consumes the entire page when you pinch and zoom. Intended behavior would be to have the page content zoom while the header (which simply contains a navigation toggle, a logo, and no text) to remain unaffected. – Justin Bull Jul 25 '13 at 04:10
@cspray I have a Flash video player inserted in a website. To send the resize data to the player, I need to measure the window's size. Which is altered when the user zooms in, becoming smaller, and vice versa. So as you zoom in the video resizes inside its container at a smaller size than it should. I don't need to block zoom, but I can't find any element whose size is not altered by this. – Rorok_89 Jan 31 '14 at 11:30

score -3 · Answer 2 · answered Jul 05 '11 at 09:49

you can disable the cntl button with this:

<script language="JavaScript">
function disableCtrlKeyCombination(e)
{
        //list all CTRL + key combinations you want to disable
        var forbiddenKeys = new Array(‘+’);
        var key;
        var isCtrl;

        if(window.event)
        {
                key = window.event.keyCode;     //IE
                if(window.event.ctrlKey)
                        isCtrl = true;
                else
                        isCtrl = false;
        }
        else
        {
                key = e.which;     //firefox
                if(e.ctrlKey)
                        isCtrl = true;
                else
                        isCtrl = false;
        }

        //if ctrl is pressed check if other key is in forbidenKeys array
        if(isCtrl)
        {
                for(i=0; i<forbiddenkeys .length; i++)
                {
                        //case-insensitive comparation
                        if(forbiddenKeys[i].toLowerCase() == String.fromCharCode(key).toLowerCase())
                        {
                                alert(‘Key combination CTRL + ‘
                                        +String.fromCharCode(key)
                                        +‘ has been disabled.’);
                                return false;
                        }
                }
        }
        return true;
}
</script>

You should never just "disable" the control button as it has way to many uses. Disabling on a specific input may be ok, but to disable it all together then limits your suser from various things such as copy/paste. Fact is, even i'm having trouble finding a good plugin for such detections and may just spend this weekend writing one. — SpYk3HH, Feb 10 '12 at 18:09

Can I stop the resizing of elements on zoom?

2 Answers2

Linked