logoalt Hacker News

alexinavaryesterday at 3:58 PM2 repliesview on HN

Unrelated to the post, but please include a viewport tag[0] on your website; it's one line of code that makes things far easier to read on mobile.

[0]: `<meta content="initial-scale=1,width=device-width" name="viewport">`


Replies

chrismorganyesterday at 5:20 PM

I’m curious about that meta viewport declaration and where it came from: I don’t believe I’ve ever seen it in that order. The customary ordering has the attributes and content properties all reversed:

  <meta name="viewport" content="width=device-width,initial-scale=1">
kccqzyyesterday at 7:11 PM

No. You either design the site to be fully responsive (which would necessarily include CSS changes), or leave out that line. If your CSS assumes a desktop layout, it is strictly better not to set the viewport width to device-width so that the mobile browsers will use the traditional desktop viewport and the user can zoom around without anything broken. In contrast, carelessly slapping that line without CSS changes will often lead to content being clipped and invisible on mobile. This is why I have a bookmarklet to delete any viewport meta elements.