Does not have a tag with width or initial-scale  |  Lighthouse  |  Chrome for Developers Skip to main content Docs Build with Chrome Learn how Chrome works, participate in origin trials, and build with Chrome everywhere. Web Platform Capabilities ChromeDriver Extensions Chrome Web Store Chromium Web on Android Origin trials Release notes Productivity Create the best experience for your users with the web's best tools. DevTools Lighthouse Chrome UX Report Accessibility Modern Web Guidance Get things done quicker and neater, with our ready-made libraries. Workbox Puppeteer Experience Design a beautiful and performant web with Chrome. AI Performance CSS and UI Identity Payments Privacy and security Resources More from Chrome and Google. All documentation Baseline web.dev PageSpeed Insights audit Isolated Web Apps (IWA) Case studies Blog New in Chrome / English Deutsch Español – América Latina Français Indonesia Italiano Nederlands Polski Português – Brasil Tiếng Việt Türkçe Русский עברית العربيّة فارسی हिंदी বাংলা ภาษาไทย 中文 – 简体 中文 – 繁體 日本語 한국어 Sign in Docs Lighthouse Lighthouse Get started Performance audits Accessibility audits Best Practices audits SEO audits Agentic browsing audits Docs More Lighthouse Get started Performance audits Accessibility audits Best Practices audits SEO audits Agentic browsing audits Case studies Blog New in Chrome General best practices Page lacks the HTML doctype, thus triggering quirks mode Browser errors were logged to the console Displays images with incorrect aspect ratio Charset declaration is missing or occurs too late in the HTML Make your page fast Does not use HTTP/2 for all of its resources Make your page secure Links to cross-origin destinations are unsafe Includes front-end JavaScript libraries with known security vulnerabilities Ensure CSP is effective against XSS attacks Does not use HTTPS Does not redirect HTTP traffic to HTTPS Use a strong HSTS policy Mitigate clickjacking with XFO or CSP Mitigate Dom-Based XSS with Trusted Types Create a good user experience Requests the notification permission on page load Requests the geolocation permission on page load Prevents users from pasting into input fields Does not have a viewport tag with width or initial-scale Avoid deprecated technologies Uses Application Cache Uses deprecated APIs Diagnostic audits Detected JavaScript libraries Build with Chrome Web Platform Capabilities ChromeDriver Extensions Chrome Web Store Chromium Web on Android Origin trials Release notes Productivity DevTools Lighthouse Chrome UX Report Accessibility Modern Web Guidance Workbox Puppeteer Experience AI Performance CSS and UI Identity Payments Privacy and security Resources All documentation Baseline web.dev PageSpeed Insights audit Isolated Web Apps (IWA) Home Docs Lighthouse Best Practices audits Does not have a tag with width or initial-scale Stay organized with collections Save and categorize content based on your preferences. Warning: This audit has moved into the Optimize viewport for mobile insight as of Lighthouse 13. For more information see What's new in Lighthouse 13. Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices. How the Lighthouse viewport meta tag audit fails Lighthouse flags pages without a viewport meta tag: A page fails the audit unless all of these conditions are met: - The document's <head> contains a <meta name="viewport"> tag. - The viewport meta tag contains a content attribute. - The content attribute's value includes the text width=. How to add a viewport meta tag Add a viewport <meta> tag with the appropriate key-value pairs to the <head> of your page: <!DOCTYPE html> <html lang="en"> <head> … <meta name="viewport" content="width=device-width, initial-scale=1"> … </head> … Here's what each key-value pair does: - width=device-width sets the width of the viewport to the width of the device. - initial-scale=1 sets the initial zoom level when the user visits the page. Initial-scale of less than 1 Where the initial-scale is set to less than 1, this can cause browsers to enable a double tap to zoom feature, typically used for desktop sites that are not mobile optimized. This adds a 300 millisecond delay to any tap interactions while the browser waits to check if a second "double" tap happens. The audit therefore also fails when the initial-scale is set to less than 1. Resources Source code for Has a <meta name="viewport"> tag with width or initial-scale audit Responsive Web Design Basics Using the viewport meta tag to control layout on mobile browsers Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates. Last updated 2024-05-27 UTC. [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-05-27 UTC."],[],[]] Contribute File a bug See open issues Related content Chromium updates Case studies Archive Podcasts & shows Follow @ChromiumDev on X YouTube Chrome for Developers on LinkedIn RSS Terms Privacy Manage cookies English Deutsch Español – América Latina Français Indonesia Italiano Nederlands Polski Português – Brasil Tiếng Việt Türkçe Русский עברית العربيّة فارسی हिंदी বাংলা ภาษาไทย 中文 – 简体 中文 – 繁體 日本語 한국어