This is a bit of a rant. Maybe my eyes are not as good as they used to be. When I read an article that has pictures on them, I like to zoom in to see the details. You might think this makes no sense, I just have to pinch the screen to zoom in. You would be right, but some websites intentionally prevent you from zooming in.
Here is an example, the straw that broke the camel’s back so to speak. I was reading an interesting article on substack about kids who ran away in the 60s, and it has these pictures of letters from those kids. Handwritten letters that complement the story and I really wanted to read. But have you tried reading text from a picture in an article on a phone? Again, it could just be what h…
This is a bit of a rant. Maybe my eyes are not as good as they used to be. When I read an article that has pictures on them, I like to zoom in to see the details. You might think this makes no sense, I just have to pinch the screen to zoom in. You would be right, but some websites intentionally prevent you from zooming in.
Here is an example, the straw that broke the camel’s back so to speak. I was reading an interesting article on substack about kids who ran away in the 60s, and it has these pictures of letters from those kids. Handwritten letters that complement the story and I really wanted to read. But have you tried reading text from a picture in an article on a phone? Again, it could just be what happens when you spend 35 years in front of screens.
CSS alone is not enough to properly turn a page responsive on a mobile device. The browser needs to know how we want to size the viewport properly. For that we have a viewport property that gives the browser a hint on how to size the page.
<meta name="viewport">
Since we’ve started making pages responsive yesteryear, I’ve relied on a single configuration and have rarely ever found a reason to change it:
<meta name="viewport" content="width=device-width, initial-scale=1" />
The width is set to the current device’s width, mobile or desktop, it doesn’t matter. The initial-scale is set to 1. The documentation is a bit confusing, I consider the scale to just be the initial zoom level. That’s really all you need to know about the viewport if you are building a webpage and want to make it display properly on a mobile device.
But of course, the article I’m complaining about has different settings. Here is what they have:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover" />
The properties I’m complaining about are user-scalable=0 and maximum-scale=1. The first one says users can’t zoom in period. Why would you prevent users from zooming in? This is such a terrible setting that you can set your browser to ignore this setting. But for good measures, they added maximum-scale=1, which means even if you are allowed to zoom, the maximum zoom level is one... which means you can’t zoom.
Yes, I disabled zoom to make a point
It’s a terrible experience all the way around. When I read articles that have pictures, I can’t zoom in! I can’t properly look at the pictures. There are a few platforms that I’ve noticed have these settings. Substack and Medium are the most annoying. Now, when I know an article is from those platforms, I just ignore them.
The only time you ever need to override users from zooming is if it’s a web game. Other than that, it’s just plain annoying.