META Needs a Name

August 16, 2025

The current article in this series describes how a <meta> tag sets up a page to work responsively with different device sizes.

Review

Readers may skip over the next few paragraphs, as they review the path that brought me to this topic.

The previous article on August 11th complained of disappointment with the way my web design displayed on the narrow screen of a smartphone. I was doing everything right, or so I thought.

The fault was due to my mistake. Code is very unforgiving of mistakes, as discussed with some humility on a sibling site, CodeDiarist: Code Is Pass/Fail

I built a media query into the CSS styling code. It obtains the screen width from the browser then selects one or the other of two, different ways to lay out a page. This will work fine on a computer monitor or laptop screen because the device has just one physical screen size, measured in pixels. The user can change the window width and the media query will adjust accordingly, like magic.

Phones complicate things. Their physical screens can have very large numbers of pixels. Users can zoom in and out, changing the apparent pixel-size of the screen. Further complicating things, they typically report a device width much smaller than their actual number of screen pixels. It all contributes toward a very nice browsing experience for the phone user but can mislead a media query.

Web designers targeting phones learn to inform the browser which screen width they want to check. For most purposes, they want the device width. The way to obtain this selection is to write a <meta> tag such as the following:

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

What I had done wrong was to write rel in place of name in that tag. Silly me.

<meta> and the viewport

A <meta> tag informs selected metadata elements of a web page. Metadata is background information about the page, not intended to be displayed on the page.

The viewport is such an element of metadata. Quite a number of different properties may be defined for a viewport. Its width property is the key to responsive page design by which the layout responds to width.

The <meta> tag for responsive page design based on screen width:

1. selects the viewport element using the name= attribute, then
2. instructs the browser what value to store as the viewport’s width property. The instruction is given with the content= attribute of the metadata element.

The use of rel or any other unrecognized term as an attribute will result in the <meta> tag being ignored. Therefore, no phone response for me! <meta> needs a name! I fixed that. Now it works.

P.S. <meta> tags can operationalize a few other instructions in addition to name. They may include charset, media and http-equiv attributes. They are for specialized metadata, sometimes having only a single allowable value that is assumed by default if not spelled out in the web page code. They will not be discussed further in this article.