I would add this:

  <meta name="viewport" content="width=device-width, initial-scale=1">

All you need is initial-scale=1, not width=device-width, which is redundant.

"You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation." https://developer.apple.com/library/archive/documentation/Ap...

I've confirmed the behavior in testing.

▲ phil-pickering 5 hours ago | parent | next [-]

The latest MDN recommendation is to use only width=device-width, with initial-scale being mostly redundant.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

▲ netol 6 hours ago | parent | prev [-]

This may be Safari-specific? Google recommends setting both: https://developer.chrome.com/docs/lighthouse/best-practices/...

▲

OuterVale 6 hours ago | parent [-]

You don't need both, but you should have the width set. From that page:

> A page fails the audit unless all of these conditions are met:

> - The document's <head> contains a <meta name="viewport"> tag.

> - The viewport meta tag contains a content attribute.

> - The content attribute's value includes the text width=.

I researched and tested this extensively the other day. `<meta name="viewport" content="width=device-width">` is all you need. https://vale.rocks/micros/20260902-1350

▲

lapcat 5 hours ago | parent [-]

> 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.