Home › Forums › CSS › Emulating browser zoom with CSS (for accessibility) › Reply To: Emulating browser zoom with CSS (for accessibility)
jrrdnxZoom,
Just to see if we’re on the same page, I set up a quick example for what I’m trying to do.
Given the following HTML/CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST</title>
<style>
body {
display: flex;
height: 100vh;
margin: 0;
}
div {
flex: 1 1 50%;
max-width: 50%;
}
@media (min-width: 45em) {
div {
flex: 1 1 25%;
max-width: 25%;
}
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
</style>
</head>
<body>
</body>
</html>
By default, when the viewport is at 800px the red and blue divs will show at 25% like so:
Default 100% zoom at 800px wide viewport
When I change the built-in browser zoom to 200%, the html element becomes 400px wide and the @media (min-width: 45em) query no longer applies, EVEN THOUGH THE VIEWPORT IS STILL AT 800PX!:
200% zoom at 800px wide viewport
Providing a way for users to increase/decrease the font size for accessibility purposes is nice, but ideally we would be able to emulate this browser zoom behavior so that our media queries trigger appropriately as if the viewport itself was changing.
