[Solved] allow zoom without affecting layout

[randy]

Dear everyone,

I’ve tried many different kind of ways to sort out this problem but none of them works.
I hope that someone could help me with this issue, I will be very appreciate for your help.

How can I allow user to zoom in and out without affecting the viewport size?

For example:
The actual device width is: 1920px
Initial zoom: 100%
Initial viewport: 1920px

Current Problem:-
The actual device width is: 1920px
Zoom: 500%
Viewport: 320px

Wish to achieve:
Zoom: 500%
Viewport: 1920px, so that the layout won’t change but still allow user to zoom

That means, there will be a horizontal scroll bar in this case when we zoom in.

The page will still responsive according to device’s width.

Thank you.

Best regards,
Randy

[Paulie_D]

Zoom: 500%

Don’t you think that’s a little extreme? That means a standard 16px character would be 80px tall…I think that’s over an inch.

Current Problem:-
The actual device width is: 1920px
Zoom: 500%
Viewport: 320px

I’m not sure what this means exactly. Is this something to do with mobile?

[randy]

Hi Paulie,

Thanks for your reply.

Zoom 500% is just a sample, it could be 125%, 150% and so on.

Yes, it’s mobile and desktop, a responsive layout.

Currently, I have many media query breakpoints.

Another example here:

Let say, I have a device with 480px width, by default (100%) it will select this media query:
@media only screen and (max-width: 480px)

However when I zoom in a little more (150%) it will select this media query:
@media only screen and (max-width: 320px)

---

So, how can we keep the browser using this media query @media only screen and (max-width: 480px) no matter how far I zoom in or out?

Thanks.

Regards,
Randy

[Paulie_D]

I’m not sure zooming is what you are after…I think you mean scaling which is a little different.

Are you using the mobile meta tag for device-width?

[randy]

I’m using adobe edge reflow, so those codes are auto generated, below are the meta’s info:

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

Thanks Paulie

[Paulie_D]

What about width=device-width?

[randy]

I have tried width=device-width and also width=480but it seems like the browser just ignored this line of code.

So, I placed this in stylesheet:
@-ms-viewport{
width: 480px;
}

Tested on I.E, it works but doesn’t allow to zoom in/out.

Thanks Paulie.

[Paulie_D]

I have tried width=device-width and also width=480 but it seems like the browser just ignored this line of code.

Seems unlikely..

https://css-tricks.com/snippets/html/responsive-meta-tag/

I think we need a Codepen example…we’re working in the dark here.

[randy]

Hi Paulie,

I just found that this works but it does not allow zooming, do you have any ideas on how can we allow user scaling for this? Thanks.

@media screen and (max-width: 400px) {
@-ms-viewport { width: 320px; }
/* CSS for 320px layout goes here */
}

@media screen and (min-width: 400px) and (max-width: 640px) {
@-ms-viewport { width: 400px; }
/* CSS for 400px layout goes here */
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
@-ms-viewport { width: 640px; }
/* CSS for 640px layout goes here */
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
@-ms-viewport { width: 1024px; }
/* CSS for 1024px layout goes here */
}

@media screen and (min-width: 1366px) {
/* CSS for 1366px layout goes here */
}

[Paulie_D]

This is the problem

maximum-scale = 1.0″

Remove that…it’s not recommended any for precisely this reason.

[randy]

Hi Paulie,

I’ve tried to remove that, but the problem still maintain, below I’ve uploaded the html & css file for your references.

http://www.sendspace.com/file/kg9mre

Problems:
1) The page view be very ugly when we resize the browser. There’s no horizontal scroll bar appears, the whole page just shrink to fit the browser.

2) Only can view the page at 100%.

3) I wish it could works like yahoo.com, when you browse the page with smartphone, it’s an responsive layout, it can zoom in and out with the same media query breakpoint. When you view with desktop, it’s an desktop version and able to zoom in and out without affecting the layout.

Conclusion:
User must be able to view the page at a media query breakpoint where the breakpoint take the actual device’s resolution as a width reference and not the browser’s width, so that user can resize the window, zoom in and out and still showing the same breakpoint (Just like locking the responsive effect).

Many thanks for your help Paulie.

Regards,
Randy

[randy]

Hi Paulie,

For the file, I only set for @media only screen and (max-width: 1920px)
@-ms-viewport{
width: 1920px;
}

Thanks.

Regards,
Randy

[Atelierbram]

below I’ve uploaded the html & css file for your references.

You can’t expect people on this forum to download any file; this is not done, better do as @Paulie_D wrote; make a Codepen. And I also think that the thing to do is to change the meta viewport tag in the head to:

<meta name="viewport" content="width=device-width,initial-scale=1">

[randy]

Hi Atelierbram,

Thanks for your advice, this is my first time to use codepen, thanks:

http://codepen.io/randyrandy8/pen/iIByx

I did removed the maximum-scale but still having the same issue.

Thanks.

Regards,
Randy

[Atelierbram]

Your demo contradicts some of the remarks you made, or I do not understand your intention correctly. Cleaned up some of the markup in my fork of your pen, and brought it back to this:

http://codepen.io/atelierbram/pen/tfaoy

Now it’s for you to say if it fixes this:

User must be able to view the page at a media query breakpoint where the breakpoint take the actual device’s resolution as a width reference and not the browser’s width, so that user can resize the window, zoom in and out and still showing the same breakpoint (Just like locking the responsive effect).

Note that I did include the viewport meta tag, but it’s hidden away behind the gear icon of the html-tab in de Codepen.

[Author]

Posts