Hacker News Reader

Comment by saagarjha | Hacker News Reader

> The above 2 meta tags must come first in the <head> to consistently ensure proper document rendering.

It looks like they don't follow their own advice:

  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">

View on HN

Do what they say, not what they do!

maximum-scale has only three valid uses:

1. extreme values, like 5.0, if a browser misdetects that zooming that far is useful when it isn't (rare)

2. pure-app websites like maps or video games that have alternative scaling arrangements and browser pinch-zoom gets in the way.

3. there is no number three, and the thing you are thinking of is incorrect.

maximum-scale is an automatic usability and accessibility fail otherwise, you are bad and should be made to feel bad if you use it.

If you limit it to 1.0 by default across the board, in particular, you mean, right?

This is the thing that limit the zoom-out with a pinch in safari/scroll beyond the page and see the "surface" underneath I'm assuming correctly hopefully

There's no reason to ever defeat the pinch-in behavior, it's what lets the user know the page is fully zoomed out.

maximum-scale=1.0 causes the page to be unscalable on mobile and is almost never what you want.

> maximum-scale is an automatic usability and accessibility fail

I wish more people realized this. As somebody that's visually impaired, it makes mobile browsing quite painful for me.

just out of curiousity, how do you deal with this problem in native apps where pinch zoom is disabled?

You can't, and it sucks. That's why the web is better, or at least why it's supposed to be better.

Taking screenshots and zooming in on those... a very tedious process.

With iOS you don't need to do this. You can enable zooming as a system-wide feature. You can even zoom parts of the screen, like a magnifying glass. You can find all of these settings under Settings -> Accessibility -> Zoom.

android has the same thing. you can activate an accessibility setting and then a triple tap will zoom in everything system-wide

Unfortunately the UX of that feature isn't great, so it's only useful in some cases. Often I find the screenshot method easier/faster.

You can change the OS text size and apps will respond to it.

Just FYI in case you didn't know, both Firefox and Chrome on mobile allow you to force zoom even if there's a viewport restriction. Check accessibly settings.

Had no idea, thank you!

And Safari has completely ignored user-scalable, minimum-scale, and maximum-scale since iOS 10

https://webkit.org/blog/7367/new-interaction-behaviors-in-io...

Is there a way to change this in JS? I'd love to, say, make sure that the zoom doesn't automatically change because I have an input element that's slightly thinner than the viewport and Apple thinks this is what people want, but still let people pinch to zoom.

Not a JS solution but if memory serves, setting the font size of in an input to 16px or greater prevents the mobile auto-zoom. At least on iOS.

I tried to order a house online last night and I got to the "enter your email address to get your free quote" and because I couldn't zoom out, I could not see the Submit button.

OMG, I thought how much money is this company losing because their website intentionally disables a built in feature!?

order a _house_?

I guess they won't know what business they're losing 'cos they won't know people are leaving the site because of that specific issue.

If they're on the ball, their tracking might be good enough that they can see people leaving on that step and try to zoom in on that problem area.

If they're really good, they might spot they get no sales from users with a certain resolution and try it out for themselves.

I feel like this is a bit of a humblebrag, but you can order houses online?

house salad?

It didn’t happen to be this site? https://www.dwellito.com/modular-homes/cover (example home)

Only asking because it’s a friend’s site and I helped him build the quote modal which you currently can’t zoom.

Who buys a whole house on the internet...?

Very odd.

For a website that does follow this advice, see motherfuckingwebsite.com[0]

[0]http://motherfuckingwebsite.com/

Isn't x-ua-compatible not needed or not respected anymore? I think this for some reason... maybe I read it somewhere or concluded so; can't recall, lol.

Reply on news.ycombinator.com