/    Sign up×
Community /Pin to ProfileBookmark

Meta element syntax

Copy linkTweet thisAlerts:
Sep 17.2020

Example: `<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>`
Example: `<meta name=”viewport” content=”width=device-width; initial-scale=1.0;”>`

Is the syntax correct in both examples?

Are these web browser parameters? I’m looking at the double equal signs within and it doesn’t resemble normal attributes.

Is `initial-scale=1.0` the same as `initial-scale=1`?

to post a comment
HTML

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadSep 17.2020 — Hi there Descartes,

and a warm welcome to these forums. ;)

Your [b]first example[/b] is the correct format and the one you should use.

[i]coothead[/i]
Copy linkTweet thisAlerts:
@DescartesauthorSep 17.2020 — Thanks! 😃

So then, if I were to use shrink-to-fit=no it would look like this:

&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"&gt;

And not like this:

&lt;meta name="viewport" content="width=device-width; initial-scale=1.0; shrink-to-fit=no"&gt;

What are these? Are they HTML attributes?

This looks like an attribute to me:

name="viewport"

But this looks like something else...

content="width=device-width"

The way I see it, this would make it an attribute:

content="width-device-width"

Or possibly this:

content-width="device-width"

(I'm obsessing over the equal sign within the string.)
Copy linkTweet thisAlerts:
@DescartesauthorSep 17.2020 — According to...

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

The name is an attribute of meta element, and so is content.

> **name:** The name and content attributes can be used together to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.
>
> **content:** This attribute contains the value for the http-equiv or name attribute, depending on which is used.

According to...

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#Standard_metadata_names_defined_in_other_specifications

> The CSS Device Adaptation specification defines the following metadata name:

> viewport: gives hints about the size of the initial size of the viewport. Used by mobile devices only.
>
> Values for the content of &lt;meta name="viewport"&gt;

> ``txt<i>
&gt; </i>Value Possible subvalues
<i>&gt; </i>width A positive integer number, or the text device-width<i>
&gt; </i>`</CODE></QUOTE>

So this is... a value as a value? Sub value? So <C>device-width</C> is a CSS property value, <C>width</C> is the property name and they are both passed in as values of the <C>content` HTML attribute? 🤯
Copy linkTweet thisAlerts:
@DescartesauthorSep 17.2020 — And now we know... 😃

I'm pretty sure I covered all aspects of my question with this. If I missed something, or if there is more to this, please be my guest, let's talk about it.

I was obsessing about the syntax. I tend to do that... in this case I'm glad I did, because I learned something new today because of my obsessive nature.

(It should be noted that I have some previous programming experience, but I still see myself as a beginner, and especially when it comes to HTML, CSS and JavaScript.)
Copy linkTweet thisAlerts:
@DescartesauthorSep 17.2020 — > @Descartes#1623383 Is initial-scale=1.0 the same as initial-scale=1?

Yes! Assuming this authoritative website is to go by...

https://motherfuckingwebsite.com/

&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
Copy linkTweet thisAlerts:
@cootheadSep 17.2020 — Hi there Descartes,

you may find this link helpful...

[url=https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag][color=#069][u]Using the viewport meta tag to control layout on mobile browsers[/u][/color][/url]

...for your further understanding. ;)

[i]coothead[/i]
Copy linkTweet thisAlerts:
@VITSUSASep 18.2020 — I have also reviewed the hyperlink which Coothead shared with us is very helpful to understand the concept.
Copy linkTweet thisAlerts:
@DescartesauthorSep 19.2020 — > Apple introduced the "viewport meta tag" in Safari iOS to let web developers control the viewport's size and scale.

OK

> Many other mobile browsers now support this tag, although it is not part of any web standard.

Is this still true? (Not being part of any web standard.)

> Apple's documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.

So technically, this...

&lt;meta name="viewport" content="width=device-width; initial-scale=1;"&gt;

and this...

&lt;meta name="viewport" content="width=device-width initial-scale=1"&gt;

is still valid syntax?

On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution.

...

The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(density/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.

I didn't quite understand this. Does this mean I need to say initial-scale=1.0 or initial-scale=1 for a display that's less than 200 dpi? Does it matter (will it be treated the same way)?
Copy linkTweet thisAlerts:
@siddhi_patelSep 28.2020 — hello..

Your First one example is Correct and it was good to use.

See Below link for more understanding.

[https://stackoverflow.com/questions/22777734/what-is-initial-scale-user-scalable-minimum-scale-maximum-scale-attribute-in](url)
×

Success!

Help @Descartes spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...