> Below are the essential elements for any web document (websites/apps) > "...width=device-width, initial-scale=1..." This is a surprising bit of opinionation to an otherwise decent presentation of head elements. Websites render quite nicely on modern phones without this line, but they generally render as if they are on a desktop browser. Using the above meta tag allows you easy access to modern approaches to mobile…
allows you easy access to modern approaches to mobile development. What exactly does that mean? It reads almost like marketing copy for a new framework.
Once the browser is being honest about its screen, you can use CSS media queries and the like to do responsive web design, giving mobile devices content that fits them and is touch-friendly. If the browser is claiming a desktop-sized viewport, your options are to either serve a desktop layout or to do User-Agent sniffing and the like.
[1] All high-res devices today maintain a distinction between a CSS pixel (approximately 1/96 in.) and a device pixel, and they give their resolution in CSS pixels. This is dishonest from the point of view of 1995, but it’s convenient and it’s what web designers expect today.