Meta viewport

Author: f | 2025-04-23

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag: Without the viewport meta tag: With the viewport meta tag: resize the

Meta Viewport - blog.haposoft.com

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

Guide to Viewports (HTML Meta Viewport Tag)

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. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag: Without the viewport meta tag: With the viewport meta tag: resize the

Understanding the viewport meta tag, CSS @viewport and

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 Interoperable units for authors to use. This can be achieved by giving them the option to choose a resize behavior, so that they can align the behaviors of all browsers.The Virtual Keyboard API with overlaysModeUsing the Virtual Keyboard API with its existing overlaysMode can’t entirely achieve interop here, as in Overlay Mode the Virtual Keyboard obscures part of the page – authors need to manually offset their layouts using one of the environment variables this API provides. This happens because in overlaysMode the Visual Viewport does not get resized. This in contrast to iOS which does resize the Visual Viewport when the Virtual Keyboard gets shown.While the Viewport Units would be stable (due to a non-resized LVP/ICB), the Virtual Keyboard behavior would be different from that on iOS.Figure: iOS (on the left) resizes the Visual Viewport. When the Virtual Keyboard is set to overlaysContent on Android (on the right) it does not resize the Visual Viewport. One advantage it does give you, is that you can position elements above the Virtual Keyboard using only CSS. The pink box here has bottom: env(keyboard-inset-height, 0px); applied, a value provided by the Virtual Keyboard API.If we were to pursue this, we would force authors to:Manually adjust the size of their layoutsImplement workarounds when using the Visual Viewport API.Force all browsers to use a resizes-visual behavior with no way of switchingRight now Chrome on Android uses the resizes-content behavior. Changing it to resizes-visual with no way back could potentially break a lot of sites that did not expect this change.As outlined in the examples, it sometimes is necessary to have a layout that adapts itself to the visible space, whereas sometimes it is not. By forcing one behavior without offering a switch, authors are limited in what they can do.A new meta tagInstead of opting for a standalone meta tag, we chose to extend the existing viewport one, as this all is linked to the (resize) behavior of the viewport.">meta name="interactive-widget" content="overlays-content">Prior Art and Interesting LinksPrior ArtDavid Bokan was very active in this area back in 2016–2018. His prior art was invaluable for the

Optimizing Viewports: Using the Viewport Meta Tag in

Like the desktop layout scaled down to fit a mobile phone. Now that the browser won’t be deciding what text it might enlarge, we must get it to display the layout appropriately for small screens, instead of scaling down the desktop layout.The Viewport Meta TagMobile devices assume websites were designed for desktops. They render the site on a large viewport (980px) and scale it down to fit their smaller screen. For responsive sites we must add a meta tag to tell it to render the page at the actual pixel width of the device, instead of the default 980px.Keep the browser open in device mode so we can come back to preview the changes we’re about to make.In your code editor, switch to sanfran.html.In the tag, add the following bold code: Travel Info for San Francisco, CA - Revolution TravelThis tells mobile browsers to make the width of the viewport equal to the width of the device. Like other meta tags, it goes in the head tag.Save the file and reload the page in Chrome (which should still be in device mode).The layout and text size should now look a lot more appropriate for a small mobile phone! The viewport meta tag does not affect desktop browsers, only mobile browsers which employ the scaling behavior. As shown below, on the left is how the page looked before the meta tag, and on the right we see it with the meta tag!What happens when we rotate the device to landscape? In Chrome, above the webpage preview, click the Rotate button to change the orientation.That looks good. The portrait layout is recalculated to show more content in the wider, landscape preview.If you viewed the page on a device running iOS 8 or older, you would see that the vertical layout is scaled up to fill the wider horizontal screen, so you actually see less of the content. Most users would probably expect to see more on a wider screen. Luckily we can add a little code to change this scaling behavior.Back in sanfran.html, add the following bold code and don’t miss the comma!, initial-scale=1">More About Initial-ScaleSetting initial-scale=1 sets the page zoom to 100%, or in other words… do not scale the page. For example, 1.5 would zoom in to 150%.Some mobile browsers set initial-scale to 1 by default once you set the viewport meta tag width to device-width. As we mentioned with older iOS Safari, however, the portrait width will also be used for the landscape orientation unless specified with initial-scale.Save the file. You won’t be able to preview the effect of this in many browsers, but it’s a best practice to have for those browsers that need it.Please note that the

Viewport Meta Element - ui.dev

On unnecessary meta tags, so the fewer meta tags you have in your header, the better for your crawl budget.There is one exception, however: the Viewport tag. According to Moz:“In this mobile world, you should be specifying the viewport. If you don’t, you run the risk of having a poor mobile experience.”Over the last few years, Google has put a lot more time, energy, and resources into helping users to have a positive mobile experience. So much so that, even if you had a great desktop version of your website, if you have a poor mobile version, your desktop version will fall in the rankings. So don't ignore your mobile experience.The Google PageSpeed Insights Tool will tell you more about the viewport tag. The standard tag is: If you're doing your own SEO and you're relying on Yoast SEO to write your description and title tag, that's fine. But if you have no idea of what you're doing, leave this tag to your designer or developer. Let them tell you what to do with it, or better yet, let them do it themselves.Back to topConclusion and next stepsMeta tags are an important part of every website, but they don't have the impact they did just a few short years ago. But that doesn't mean you should ignore them. If used correctly, your SEO meta tags can still have an effect on your page's search rank and online performance.Do you want to know more about SEO and how to use the different meta tags? Or, do you want to leave the SEO and meta tags to the experts?If it’s the latter, reach out to the pros at GoDaddy SEO Services to get your site the attention it deserves. Learn how you can work less and rank higher. If it's the former,. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag: Without the viewport meta tag: With the viewport meta tag: resize the

Meta viewport notes - quirksmode.org

Our HTML & CSS tutorial provides an in-depth guide on controlling how a webpage is displayed on mobile devices, including exercises on disabling mobile browser text size adjustment and understanding the viewport meta tag. This exercise is excerpted from Noble Desktop’s past front-end web development training materials and is compatible with updates through 2022. To learn current skills in web development, check out our coding bootcamps in NYC and live online. Topics covered in this HTML & CSS tutorial: Disabling mobile browser text size adjustment, The viewport meta tag, device-width, initial-scale, maximum-scaleExercise PreviewExercise OverviewThe viewport meta tag controls how a webpage is displayed on a mobile device. Without the viewport set, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page’s width and scaling on different devices. If you completed the previous exercise, you can skip the following sidebar. If you closed sanfran.html, re-open it now. We recommend you finish the previous exercises (3B–4D) before starting this one. If you haven’t finished them, do the following sidebar.If You Did Not Do the Previous Exercises (3A–4C)Close any files you may have open.On the Desktop, go to Class Files > Web Dev Class.Delete the Revolution Travel folder if it exists.Duplicate the Revolution Travel Ready for Viewport folder.Rename the folder to Revolution Travel.Disabling Mobile Browser Text Size AdjustmentWhile the webpage responds properly in a desktop browser, we need to test how it will work on a mobile device. Thankfully, Chrome DevTools has a mobile simulator.Preview sanfran.html in Chrome.To open the DevTools, Ctrl–click (Mac) or Right–click (Windows) on the page and choose Inspect.At the top left of the DevTools panel, click the Toggle device toolbar button to open the mobile simulator.Above the webpage preview, select a device such as the iPhone 5/SE:Click the Reload button, or hit Cmd–R (Mac) or Ctrl–R (Windows).The desktop layout has been scaled down (as you can see in the navigation at the top), but text in the main column is large so what’s going on? Some mobile browsers enlarge text they think is too small (if they think it doesn’t break the layout). We don’t want browsers arbitrarily overriding some font sizes, so let’s disable that.Switch back to your code editor.Go to Revolution Travel > snippets and open a code snippet we prepared for you, text-size-adjust.css.Hit Cmd–A (Mac) or Ctrl–A (Windows) to select all the code.Hit Cmd–C (Mac) or Ctrl–C (Windows) to copy it.Close the file.At the top of main.css, paste the new code above the body rule:html { -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}body {Save the file.Switch back to Chrome and reload the page.The text is no longer being enlarged, so it looks