Merge Viewport meta tag guide into reference (#41521)

* Merge Viewport meta tag guide into reference

* Apply suggestions from code review

Co-authored-by: sideshowbarker <[email protected]>

---------

Co-authored-by: sideshowbarker <[email protected]>

Author: Josh-Cena

files/en-us/_redirects.txt

@@ -13314,6 +13314,7 @@
 /en-US/docs/Web/HTML/Global_attributes/translate	/en-US/docs/Web/HTML/Reference/Global_attributes/translate
 /en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy	/en-US/docs/Web/HTML/Reference/Global_attributes/virtualkeyboardpolicy
 /en-US/docs/Web/HTML/Global_attributes/writingsuggestions	/en-US/docs/Web/HTML/Reference/Global_attributes/writingsuggestions
+/en-US/docs/Web/HTML/Guides/Viewport_meta_element	/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
 /en-US/docs/Web/HTML/Index	/en-US/docs/Web/HTML
 /en-US/docs/Web/HTML/Inline_elemente	/en-US/docs/Glossary/Inline-level_content
 /en-US/docs/Web/HTML/Inline_elements	/en-US/docs/Glossary/Inline-level_content
@@ -13341,7 +13342,7 @@
 /en-US/docs/Web/HTML/Supported_media_formats	/en-US/docs/Web/Media/Guides/Formats
 /en-US/docs/Web/HTML/The_Importance_of_Correct_HTML_Commenting	/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax#HTML_comments
 /en-US/docs/Web/HTML/Using_HTML5_audio_and_video	/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio
-/en-US/docs/Web/HTML/Viewport_meta_tag	/en-US/docs/Web/HTML/Guides/Viewport_meta_element
+/en-US/docs/Web/HTML/Viewport_meta_tag	/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
 /en-US/docs/Web/HTML/element/content	/en-US/docs/Web/HTML/Reference/Elements/slot
 /en-US/docs/Web/HTML/microformats	/en-US/docs/Web/HTML/Guides/Microformats
 /en-US/docs/Web/HTTP/Access_control_CORS	/en-US/docs/Web/HTTP/Guides/CORS

files/en-us/learn_web_development/core/accessibility/mobile/index.md

@@ -221,7 +221,7 @@ We've provided a simple example that shows how to use the mouse and touch events
 
 In particular, the most common problems that need to be addressed for mobile are:
 
-- Suitability of layouts for mobile devices. A multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. Such issues can be solved by creating a responsive layout using technologies such as [media queries](/en-US/docs/Web/CSS/CSS_media_queries), [viewport](/en-US/docs/Web/HTML/Guides/Viewport_meta_element), and [flexbox](/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox).
+- Suitability of layouts for mobile devices. A multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. Such issues can be solved by creating a responsive layout using technologies such as [media queries](/en-US/docs/Web/CSS/CSS_media_queries), [viewport](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport), and [flexbox](/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox).
 - Conserving image sizes downloaded. In general, small-screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections. Therefore, it is wise to serve smaller images to narrow screen devices as appropriate. You can handle this using [responsive image techniques](/en-US/docs/Web/HTML/Guides/Responsive_images).
 - Thinking about high resolutions. Many mobile devices have high-resolution screens, and therefore need higher-resolution images so that the display can continue to look crisp and sharp. Again, you can serve images as appropriate using responsive image techniques. In addition, many image requirements can be fulfilled using the SVG vector images format, which is well-supported across browsers today. SVG has a small file size and will stay sharp regardless of whatever size is being displayed (see [Including vector graphics in HTML](/en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML) for more details).
 
@@ -234,7 +234,7 @@ There are other important issues to consider when making sites more accessible o
 
 #### Not disabling zoom
 
-Using [viewport](/en-US/docs/Web/HTML/Guides/Viewport_meta_element), it is possible to disable zoom. Always ensure resizing is enabled, and set the width to the device's width in the {{htmlelement("head")}}:
+Using [viewport](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport), it is possible to disable zoom. Always ensure resizing is enabled, and set the width to the device's width in the {{htmlelement("head")}}:
 
 ```html
 <meta name="viewport" content="width=device-width; user-scalable=yes" />

files/en-us/learn_web_development/core/css_layout/responsive_design/index.md

@@ -481,7 +481,7 @@ By setting `width=device-width` you are overriding a mobile device's default, li
 
 **So you should _always_ include the viewport meta tag in the head of your documents.**
 
-There are a number of other options you can put inside the `content` attribute of the viewport meta tag — see [Using the viewport meta tag to control layout on mobile browsers](/en-US/docs/Web/HTML/Guides/Viewport_meta_element) for more details.
+There are a number of other options you can put inside the `content` attribute of the viewport meta tag — see the [`<meta name="viewport">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport) reference for more details.
 
 ## Summary
 

files/en-us/learn_web_development/extensions/testing/html_and_css/index.md

@@ -330,7 +330,7 @@ If you do need to include modern features, test for feature support using [`@sup
 
 ### Responsive design problems
 
-Responsive design is the practice of creating web layouts that change to suit different device form factors — for example, different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using [media queries](/en-US/docs/Web/CSS/CSS_media_queries), and make sure it is applied correctly using [viewport](/en-US/docs/Web/HTML/Guides/Viewport_meta_element). You can find a detailed account of such practices in [our responsive design tutorial](/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design).
+Responsive design is the practice of creating web layouts that change to suit different device form factors — for example, different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using [media queries](/en-US/docs/Web/CSS/CSS_media_queries), and make sure it is applied correctly using [viewport](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport). You can find a detailed account of such practices in [our responsive design tutorial](/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design).
 
 Resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem. In addition, different devices can have a range of different resolutions, meaning that smaller images could appear pixelated. There are a number of techniques that allow you to work around such problems, from [media queries](/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design#media_queries) to more complex [responsive image techniques](/en-US/docs/Web/HTML/Guides/Responsive_images#resolution_switching_different_sizes), including {{HTMLElement('picture')}} and the {{HTMLElement('img')}} element's [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) and [`sizes`](/en-US/docs/Web/HTML/Reference/Elements/img#sizes) attributes.
 

files/en-us/mdn/writing_guidelines/code_style_guide/html/index.md

@@ -59,7 +59,7 @@ Finally, you should always add the viewport meta tag into your HTML {{HTMLElemen
 <meta name="viewport" content="width=device-width" />
 ```
 
-See [Using the viewport meta tag to control layout on mobile browsers](/en-US/docs/Web/HTML/Guides/Viewport_meta_element) for further details.
+See [`<meta name="viewport">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport) for further details.
 
 ## Attributes
 

files/en-us/mozilla/firefox/releases/133/index.md

@@ -12,7 +12,7 @@ This article provides information about the changes in Firefox 133 that affect d
 
 ### HTML
 
-- The [`viewport <meta>` tag](/en-US/docs/Web/HTML/Guides/Viewport_meta_element) now supports the [`interactive-widget`](/en-US/docs/Web/HTML/Guides/Viewport_meta_element#the_effect_of_interactive_ui_widgets) attribute, this influences the size of the viewport when common UI widgets, such as virtual keyboards, are added to the screen. ([Firefox bug 1831649](https://bugzil.la/1831649) and [Firefox bug 1920755](https://bugzil.la/1920755)).
+- The [`viewport <meta>` tag](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport) now supports the [`interactive-widget`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport#the_effect_of_interactive_ui_widgets) attribute, this influences the size of the viewport when common UI widgets, such as virtual keyboards, are added to the screen. ([Firefox bug 1831649](https://bugzil.la/1831649) and [Firefox bug 1920755](https://bugzil.la/1920755)).
 
 ### CSS
 

files/en-us/web/api/htmlmetaelement/index.md

@@ -64,7 +64,7 @@ meta.content = "width=device-width, initial-scale=1";
 document.head.appendChild(meta);
 ```
 
-For more information on setting the viewport, see [Viewport basics](/en-US/docs/Web/HTML/Guides/Viewport_meta_element#viewport_basics).
+For more information on setting the viewport, see [`<meta name="viewport">`](/en-US/docs/Reference/Elements/meta/name/viewport).
 
 ## Specifications
 

files/en-us/web/css/css_media_queries/index.md

@@ -126,7 +126,7 @@ The CSS media queries level 5 module also introduces the `environment-blending`,
 - HTML
   - `sizes` attribute for [`<img>`](/en-US/docs/Web/HTML/Reference/Elements/img#sizes), [`<link>`](/en-US/docs/Web/HTML/Reference/Elements/link#sizes), and [`<source>`](/en-US/docs/Web/HTML/Reference/Elements/source#sizes) for {{HTMLElement("picture")}}
   - `media` attribute for [`<link>`](/en-US/docs/Web/HTML/Reference/Elements/link#media), [`<source>`](/en-US/docs/Web/HTML/Reference/Elements/source#media), and [`<style>`](/en-US/docs/Web/HTML/Reference/Elements/style#media) [HTML](/en-US/docs/Web/HTML)
-  - [Viewport `<meta>` tag](/en-US/docs/Web/HTML/Guides/Viewport_meta_element)
+  - [`<meta name="viewport">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport)
 - SVG [`media`](/en-US/docs/Web/SVG/Reference/Attribute/media) attribute
 
 ## Specifications

files/en-us/web/css/cssom_view/viewport_concepts/index.md

@@ -49,7 +49,7 @@ window.outerHeight; /* 900 */
 
 There are several DOM properties that can help you query viewport size, and other similar lengths:
 
-- The document element's {{DOMxRef("Element.clientWidth")}} is the inner width of a document in [CSS pixels](/en-US/docs/Web/HTML/Guides/Viewport_meta_element#screen_density), including padding (but not borders, margins, or vertical scrollbars, if present). **This is the viewport width**.
+- The document element's {{DOMxRef("Element.clientWidth")}} is the inner width of a document in [CSS pixels](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport#screen_density), including padding (but not borders, margins, or vertical scrollbars, if present). **This is the viewport width**.
 - The {{DOMxRef("Window.innerWidth")}} is the width, in CSS pixels, of the browser window viewport including, if rendered, the vertical scrollbar.
 - The {{DOMxRef("Window.outerWidth")}} is the width of the outside of the browser window including all the window {{glossary("chrome")}}.
 
@@ -170,8 +170,7 @@ The `width` property controls the size of the viewport. It should preferably be
 
 - [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module
 - [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API)
-- {{HTMLElement("meta")}}, specifically `<meta name="viewport">`
-- [Using the viewport meta tag to control layout on mobile browsers](/en-US/docs/Web/HTML/Guides/Viewport_meta_element)
+- {{HTMLElement("meta")}}, specifically [`<meta name="viewport">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport)
 - [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API)
 - [CSS viewport](/en-US/docs/Web/CSS/CSS_viewport) module
 - [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module