Remix.run Logo
lapcat 5 hours ago

> I researched and tested this extensively the other day. `<meta name="viewport" content="width=device-width">` is all you need.

This is incorrect. Try adding an <img> that's wider than the device width. Then the whole page gets zoomed and the text unreadably small.

OuterVale 5 hours ago | parent [-]

The same will happen regardless in the case of content extending beyond the width of the viewport. With `initial-scale=1` it'll be a horizontal overflow, without it'll zoom out. I argue that the latter is preferable (https://vale.rocks/micros/20260908-1315) but either way should never reach users due to the usability fails and major accessibility issues.

lapcat 5 hours ago | parent [-]

> I argue that the latter is preferable

I disagree vehemently. I couldn't disagree more. The text has to be readable. If you force the reader to zoom in order to read the text, your website is fundamentally broken.

Moreover, neither of these considerations apply to images: "you risk having content off-screen which cannot be focused by a keyboard" "A user is extremely unlikely to think to scroll horizontally to see the rest of a document"

"There is even great president for it with documents on the web" Typo: precedent.

> either way should never reach users

This seems practically unavoidable with images, especially screenshots for example. Device widths vary, image widths vary. There is no magical image width that fits every device width, unless the image is very narrow. Moreover, I try to avoid JavaScript altogether when possible, so I don't want custom JS image viewers all over the place.