How to fix the size of the page and its elements when zooming in and out

Question

I am working on a web application, and I am facing a lot of issues when zooming

Here is a blueprint of the architecture of the page :

lately the client asked us to make the application adjustable with different resolutions, the original one is : (1280*1024), now We have added some media queries so it will fit in (1600*900) & (1920*1080), currently the application is working fine in these resolutions, but we are facing one problem which is triggered when the user zooms in or out, the page becomes messed up.

I have looked online, and I've found that I need to wrap the header and content in one single div, and assigning margin : 0 auto; with a max-width & max-height..., I did that but I still have the same issue.

Apparently the problem disappears when I use the emulator in Internet Explorer and I precise the resolution such us Below the application is working fine when zooming, but when the Emulator is on default mode the problem occurs.

The application is very old and it's working only in IE11 compatibility mode.

So my question is, how to fix the size of the page in different resolutions without modifying the emulator?

Can you try: max-width: 1024px; width: 100%; margin: 0 auto; — Neha Sharma, Oct 31 '19 at 16:46
@ Neha Sharma thank you for your response, I just updated my question, I forgot to add a case when it works correctly, and it's when I use the emulator in IE. — Zakaria Marrah, Oct 31 '19 at 17:13
If zoom is not a requirement for your website/app. I wouldn't worry about it because zoom behaves differently on all browsers. — MistaPrime, Oct 31 '19 at 18:22
Unfortunately It is, because there are some users with weak vision who use the Zoom functionality. — Zakaria Marrah, Nov 04 '19 at 09:30

score 0 · Answer 1 · answered Nov 01 '19 at 06:14

0

The application works fine when you use the Emulator because you define the resolution for it and the resolution won't change when zooming in this situation.

But zoom itself is a behavior which will make the browser behave as different devices and will definitely change the resolution, so the appearance will be different.

I think you just need to make media query with the commonly used resolutions. For more information, you could refer to this thread.

answered Nov 01 '19 at 06:14

Yu Zhou

11,532
1
8
22

That's what I implemented, I have assigned media queries to different resolutions i.e : **@media only screen** and (min-width: 1440px) and (max-width: 1919px) {} **@media only** screen and (max-width: 1439px) {} **@media only** screen and (min-width: 1920px){} But even so, the style is corrupted once I zoom in or Out. Is there a way to fix the screen resolution when I zoom? – Zakaria Marrah Nov 04 '19 at 10:08
Have you used F12 dev tools to check if the media query has been applied when you zoom? As IE 8 and before don't support media query and I notice that you say your website runs in IE 11 compatibility mode which may have a document mode before IE 8. – Yu Zhou Nov 05 '19 at 02:16

How to fix the size of the page and its elements when zooming in and out

1 Answers1