Google Chrome - Zoom without changing the viewport

Maybe I overlooked something or don't know how to word my question well enough, but I was not able to find anything online about this.

I would like zoom in Chrome, without changing the viewport or the website changing at all. So, if I zoom in on a website, I can zoom in on a detail without my responsive design moving it around and scaling it to "correct" sizing.

Is there a chrome extension for this, or a way to enable such a zoom function in Chrome?

5 Answers

This extension is exactly what you are looking for: Custom Page Zoom

but sadly, it doesn't have shortcuts.

PS: Bear in mind that this extension requests data access to all websites you visit for some reason.

1

If you have a precision touchpad (most new laptops have these) or touch screen, you can pinch-out to zoom.

For macOS
Take webpage. Press Command and "+" button to zoom.

For Windows
Take webpage. Press and hold Ctrl button and scroll mouse wheel up.

Edit

1) Go to System Preferences->Accessibility
2) Select Zoom and Enable "Use Keyboard shortcuts to zoom"
3) Note down the shortcuts.
4) By default ⌥-⌘-= for zoom in and ⌥-⌘-- for zoom out.

3

I never found the solution but do this:

Take a screenshot and paste it into my favorite image viewing program and zoom there.

1

User agents ( Chrome, Firefox, Chrome for Android, etc ) have the default behaviour of setting the body to 100% of the viewport, to be precise, visual viewport. Hence, when the window is resized, the viewport ( layout and visual ) changes, which causes it to always fit the content and causing other undesirable ( not always ) consequences like changing the layout in responsive designs.

If you are using a mobile-first approach, set body's min-width ( in your media query ) to an absolute value and use min-device-width or max-device-width to trigger your media queries.

This would trigger media queries, not when the browser window is resized, but only when the content is rendered on a device whose size is mentioned in your media query.

Eg:

body {
width : 90%;
}

And use media query like:

@media screen and (min-device-width: 960px) { body { width : 900px; }
// Other CSS Rules to apply when device width > 960px
}

This will cause your layout to be responsive on mobile devices, but not on desktop even if your browser window is resized or zoomed. Instead, it puts a horizontal scroll bar when content is zoomed or resized.

By using this approach, you can also skip using the <meta name="viewport" content="width=device-width, initial-scale=1" > tag ( although it is not recommended )

Hope this helps!

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy