Meta viewport

Contents Definition Usage Importance Viewport FAQ What is a viewport? What is the viewport meta tag? How is the viewport meta tag used? Why is the viewport meta tag important? Are there any default values for the viewport that I should know about? Is the viewport meta tag the only element to consider when it comes to device compatibility? Is it necessary to include the viewport meta tag in the web page? ReferencesDefinitionA viewport is a user interface feature of a web browser that determines how a website's content is displayed on a device's screen[1]. The viewport is the area of the screen that a website is rendered in, and it can be controlled by the web developer through the use of the viewport meta tag in the website's HTML code.UsageThe viewport meta tag is used to set the width and initial scale of the viewport, and it can be used to optimize the website's layout for different device screen sizes. For example, a website that is designed for desktop computers may not display correctly on a mobile device with a smaller screen. By using the viewport meta tag, a web developer can ensure that the website is properly scaled and laid out for the specific device being used to view it.The most common usage of the viewport meta tag is:This tells the browser to set the width of the viewport to the width of the device and set an initial scale of 1.0, which means that the website will be displayed at its original size.ImportanceThe viewport meta tag is particularly important for mobile web development, as it allows web developers to ensure that a website's layout and navigation are optimized for small screens and touch-based input. It is also used in responsive web design.Keep in mind that different devices may have different default values for the viewport, and you may have to adjust the settings accordingly to better fit the expected layout on that device. Additionally, while this meta tag is important, it is not the only element to consider, other CSS and javascript can also impact how the website is displayed on different devices.Viewport FAQWhat is a viewport?A viewport is a user interface feature of a web browser that determines how a website's content is displayed on a device's screen.What is the viewport meta tag?The viewport meta tag is used in the HTML code of a website to

Control the width and initial scale of the viewport, allowing web developers to optimize the website's layout for different device screen sizes.How is the viewport meta tag used?By including the following tag in the head section of your HTML: , the browser is told to set the width of the viewport to the width of the device and set an initial scale of 1.0.Why is the viewport meta tag important?The viewport meta tag is particularly important for mobile web development, as it allows web developers to ensure that a website's layout and navigation are optimized for small screens and touch-based input. It is also used in responsive web design.Are there any default values for the viewport that I should know about?Different devices may have different default values for the viewport, and you may have to adjust the settings accordingly to better fit the expected layout on that device.Is the viewport meta tag the only element to consider when it comes to device compatibility?No, while the viewport meta tag is important, other CSS and javascript can also impact how the website is displayed on different devices.Is it necessary to include the viewport meta tag in the web page?It is not strictly necessary, but it is a best practice to include it in the web page, to ensure that the website is properly scaled and laid out for the specific device being used to view it.References

Viewport vs Virtual Keyboard Resize BehaviorAuthors: Bramus, David Bokan, Robert Flack, Anders Hartvoll Ruud, Ian Kilpatrick, Chris HarrelsonTOCStatus of this documentIntroductionKey termsThe ICBViewport-Relative LengthsThe Layout ViewportThe Visual ViewportProblem StatementThe side-effect of a resized ICBExample LayoutsProposalAdvantages/DisadvantagesAlternatives ConsideredDo nothingThe VirtualKeyboard API with overlaysModeForce all browsers to use a resizes-visual behavior with no way of switchingA new meta tagPrior Art and Interesting LinksPrior ArtInteresting LinksPrivacy and Security ConsiderationsPrivacySecurityFollow-up workAllow authors to easily position elements above the Virtual Keyboard when having opted in to the resizes-visual behaviorStatus of this documentThis document is intended as a starting point for engaging the community and standards bodies in developing collaborative solutions fit for standardization. As the solutions to problems described in this document progress along the standards-track, we will retain this document as an archive and use this section to keep the community up-to-date with the most current standards venue and content location of future work and discussions.This document status: GRADUATEDCurrent venue: W3C CSS Working Group | w3c/csswg-draftsCurrent version: CSS Viewport Module Level 1IntroductionOn the web, when focussing an input or any other editable area, devices –mostly touchscreen devices– can show a Virtual Keyboard to allow users to enter content into the editable area. When doing so, User Agents respond in one of the following ways in relation to the Viewports.Resize both the Visual Viewport and Layout ViewportResize only the Visual Viewport, and offset Layout ViewportDo not resize any of the Layout Viewport or Visual Viewport, overlaying the Virtual Keyboard on top of both.Each of the listed behaviors differently affects the size and/or position of certain elements on web pages, namely:Elements that rely on Viewport UnitsElements that rely on position: fixed;Elements that are sized to take up the visual spaceDepending on which behavior a User Agent + Platform combination a visitor uses, layout changes might occur, out of the control of the author.This document proposes an extension the viewport meta tag so that authors get to opt in to any of those behaviors in a declarative manner.">meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=overlays-content">This way, authors get to control which behavior a User Agent uses.Key termsThere are many terms used

Layout, and simply overlays the content.ProposalTo switch Virtual Keyboard behaviors, authors can use an extra key-value pair the viewport meta tag. That way, they get to control the resize behavior of the various Viewports in case the Virtual Keyboard gets shown.The key is interactive-widget, and it accepts one of these three values:resizes-visual = Resize only the Visual Viewport but not the Layout Viewportresizes-content = Resize both the Visual Viewport and Layout Viewportoverlays-content = Do not resize any viewportExample:">meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=overlays-content">Visualized, the settings have this effect on the various viewports:Figure: The different behaviors and their effect on the ICB (red), Layout Viewport (blue), and Visual Viewport (Orange)When no behavior specified – e.g. due to the meta tag not being present – User Agents use their default behavior, whichever it is that they use.Figure: Effect of the proposed behavior, lining up the behavior between Chrome and Safari both on iOS and (not depicted) Android on CrOSℹ️ Note: Through this declarative way of controlling the resize behavior, we would also solve this request for the Virtual Keyboard APIAdvantages/Disadvantages✅ Platforms can retain the current behavior they already have, if they want to.✅ Authors can opt-in to any of the behaviors, not being bound to what the platform + browser combination their visitors are on uses as a default.✅ When an author opts in to a certain behavior, they know that elements sized to Viewport-Relative Units –amongst others– will work in a similar way on each platform, in case the Virtual Keyboard is shown.✅ When an author opts in to a certain behavior, they know that the position of certain elements will behave in a similar way on each platform, in case the Virtual Keyboard is shown.❌ If authors have opted in to resizes-visual but want to retain a fixed positioning behavior where they want to an element above the Virtual Keyboard, they need to resort to JS to achieve thisThis workaround is already needed today for browsers that do not resize the ICBAlternatives ConsideredDo nothingWith the upcoming release of new Viewport-relative Units as part of Interop2022, we are aiming for stable and