Viewport meta

Author: e | 2025-04-24

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 Viewport คืออะไร อธิบายเกี่ยวกับ Viewport Meta Tag ว่า คืออะไรและมีความสำคัยอย่างไรต่อหน้าเว็บไซต์บ้าง และอธิบายเกี่ยวหับ meta viewport ว่าคือ

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

Guide to Viewports (HTML Meta Viewport Tag)

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

Understanding the viewport meta tag, CSS @viewport and

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. 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 Viewport คืออะไร อธิบายเกี่ยวกับ Viewport Meta Tag ว่า คืออะไรและมีความสำคัยอย่างไรต่อหน้าเว็บไซต์บ้าง และอธิบายเกี่ยวหับ meta viewport ว่าคือ

Optimizing Viewports: Using the Viewport Meta Tag in

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

Viewport Meta Element - ui.dev

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

Meta viewport notes - quirksmode.org

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 Viewport คืออะไร อธิบายเกี่ยวกับ Viewport Meta Tag ว่า คืออะไรและมีความสำคัยอย่างไรต่อหน้าเว็บไซต์บ้าง และอธิบายเกี่ยวหับ meta viewport ว่าคือ