In the dynamic world of web development, ensuring your website looks and functions flawlessly across a myriad of devices is no longer a luxury—it’s a necessity. One of the most critical elements in achieving this is the `viewport` meta tag. This often-overlooked tag is the key to responsive web design, dictating how a webpage scales and renders on different screen sizes. Without it, your carefully crafted website might appear as a shrunken version on mobile devices, forcing users to zoom and pan to read content. This not only degrades the user experience but also can lead to lower search engine rankings, as Google prioritizes mobile-friendly websites.
Understanding the Viewport Meta Tag
The `viewport` meta tag is an HTML meta tag that provides instructions to the browser on how to control the page’s dimensions and scaling. It’s typically placed within the “ section of your HTML document. The primary purpose of this tag is to control the viewport—the area of the browser window where your web content is displayed. By default, most mobile browsers render a website at a desktop-sized viewport and then scale it down to fit the screen. This results in a poor user experience. The `viewport` meta tag overrides this behavior, allowing you to control how the page scales and adapts to different screen sizes.
Here’s the basic structure of the `viewport` meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Let’s break down the key attributes:
name="viewport": This attribute specifies that the meta tag is for viewport settings.content="...": This attribute contains the actual viewport settings.width=device-width: This sets the width of the viewport to the width of the device screen. This is crucial for responsive design.initial-scale=1.0: This sets the initial zoom level when the page is first loaded. A value of 1.0 means no initial zoom; the page will be displayed at its actual size.
Setting Up the Viewport Meta Tag in Your HTML
Integrating the `viewport` meta tag into your HTML is straightforward. Simply add the following line within the “ section of your HTML document, ensuring it appears before any other CSS or JavaScript files:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website Title</title>
<link rel="stylesheet" href="styles.css">
</head>
By including this tag, you’re instructing the browser to render your website at the device’s screen width and set the initial zoom level to 1.0. This ensures that the content is displayed correctly and is readable on all devices without requiring users to zoom or scroll horizontally.
Advanced Viewport Settings
While width=device-width and initial-scale=1.0 are the most common and essential settings, the `viewport` meta tag offers additional attributes to fine-tune your website’s responsiveness. Understanding these attributes can provide greater control over how your content is displayed on various devices.
maximum-scale
The maximum-scale attribute controls the maximum amount the user is allowed to zoom in. It prevents users from zooming in further than the specified scale. This is useful for controlling the user’s ability to zoom and ensuring that the layout remains intact even when zoomed in.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
In this example, maximum-scale=1.0 disables zooming. However, be cautious when disabling zoom, as it can hinder accessibility for users who need to zoom in to read content.
minimum-scale
The minimum-scale attribute defines the minimum amount the user is allowed to zoom out. It prevents the user from zooming out beyond the specified scale. This can be used to ensure the content remains readable and the layout is maintained.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5">
In this example, the user is prevented from zooming out further than 50% of the initial scale.
user-scalable
The user-scalable attribute controls whether the user is allowed to zoom in and out. It accepts either yes or no. Setting it to no disables zooming. This attribute is less commonly used as it can negatively impact accessibility.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
In this example, zooming is disabled. Again, consider the accessibility implications before disabling zoom.
Common Mistakes and How to Fix Them
Even with a good understanding of the `viewport` meta tag, developers can make mistakes that can impact the responsiveness of their websites. Here are some common pitfalls and how to avoid them:
Missing the Viewport Meta Tag
This is perhaps the most common mistake. Without the `viewport` meta tag, your website will likely render at a desktop-sized viewport on mobile devices, leading to a poor user experience. The fix is simple: add the tag to the “ of your HTML document.
Incorrect Values for `width`
Using incorrect values for the `width` attribute can cause issues. The most common and recommended value is device-width. Avoid using a fixed width unless you have a specific reason to do so, as this can prevent your website from adapting to different screen sizes.
Disabling Zoom (user-scalable=no)
While disabling zoom might seem like a good idea for layout control, it can severely impact accessibility. Users with visual impairments rely on zoom to read content. Avoid disabling zoom unless absolutely necessary, and consider alternatives like ensuring your content is readable at smaller sizes through proper typography and layout.
Using the Wrong Order
While not strictly incorrect, placing the `viewport` meta tag out of order can sometimes lead to unexpected behavior. It is best practice to include the `viewport` meta tag early in the “ section, ideally right after the `
` tag and before any other CSS or JavaScript files. This ensures that the browser interprets the viewport settings before rendering the page.</p>
<h2>Real-World Examples and Use Cases</h2>
<p>Let’s look at some real-world examples to illustrate how the `viewport` meta tag works in practice. We’ll examine how different viewport settings affect the rendering of a simple website on various devices.</p>
<h3>Example 1: Basic Responsive Layout</h3>
<p>Consider a simple website with the following HTML structure:</p>
<pre><code class="language-html" data-line=""><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<p>This is a paragraph of text.</p>
<p>Another paragraph of text.</p>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>
</code></pre>
<p>And the following CSS (styles.css):</p>
<pre><code class="language-css" data-line="">body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</code></pre>
<p>With the `viewport` meta tag set to <code class="" data-line=""><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>, this website will render responsively on all devices. The content will scale to fit the screen width, and the initial zoom level will be 1.0.</p>
<h3>Example 2: Controlling Zoom</h3>
<p>If you want to prevent users from zooming, you can add <code class="" data-line="">maximum-scale=1.0</code> to the `viewport` meta tag:</p>
<pre><code class="language-html" data-line=""><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
</code></pre>
<p>This will prevent users from zooming in. However, remember the accessibility implications and use this with caution.</p>
<h3>Example 3: Setting a Minimum Zoom</h3>
<p>To set a minimum zoom level, you can use the <code class="" data-line="">minimum-scale</code> attribute:</p>
<pre><code class="language-html" data-line=""><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.75">
</code></pre>
<p>This will prevent users from zooming out further than 75% of the initial scale.</p>
<h2>Step-by-Step Instructions: Implementing the Viewport Meta Tag</h2>
<p>Here’s a step-by-step guide to implementing the `viewport` meta tag in your website:</p>
<ol>
<li><strong>Open Your HTML File:</strong> Open the HTML file of your website in a text editor or code editor.</li>
<li><strong>Locate the <head> Section:</strong> Find the <code class="" data-line=""><head></code> section of your HTML document. This section typically contains meta tags, the title of your website, and links to your CSS and JavaScript files.</li>
<li><strong>Add the Viewport Meta Tag:</strong> Inside the <code class="" data-line=""><head></code> section, add the following line of code, preferably right after the <code class="" data-line=""><title></code> tag:
<pre><code class="language-html" data-line=""><meta name="viewport" content="width=device-width, initial-scale=1.0">
</code></pre>
</li>
<li><strong>Save Your File:</strong> Save the changes to your HTML file.</li>
<li><strong>Test Your Website:</strong> Open your website in a web browser and test it on different devices or using the browser’s developer tools to simulate different screen sizes. Verify that the website scales correctly and is readable on all devices.</li>
</ol>
<p>By following these simple steps, you can ensure that your website is responsive and provides a great user experience on all devices.</p>
<h2>SEO Considerations</h2>
<p>The `viewport` meta tag is not directly a ranking factor for search engines, but it indirectly influences your website’s search engine optimization (SEO). Google and other search engines prioritize mobile-friendly websites. If your website is not responsive and does not have the `viewport` meta tag, it will likely render poorly on mobile devices, leading to a negative user experience and potentially lower search engine rankings. By implementing the `viewport` meta tag and ensuring your website is responsive, you are improving the user experience, which is a crucial factor for SEO.</p>
<p>Here are some SEO best practices related to the `viewport` meta tag and responsive design:</p>
<ul>
<li><strong>Use the correct `viewport` meta tag:</strong> Ensure that you have the correct `viewport` meta tag in your HTML.</li>
<li><strong>Test on multiple devices:</strong> Test your website on various devices and screen sizes to ensure it renders correctly.</li>
<li><strong>Use responsive design techniques:</strong> Implement responsive design techniques, such as fluid grids, flexible images, and media queries, to create a fully responsive website.</li>
<li><strong>Optimize your website’s speed:</strong> A fast-loading website is essential for a good user experience and SEO. Optimize your images, use browser caching, and minimize your CSS and JavaScript files.</li>
<li><strong>Provide a good user experience:</strong> A good user experience is crucial for SEO. Make sure your website is easy to navigate, has clear content, and is accessible to all users.</li>
</ul>
<h2>Summary / Key Takeaways</h2>
<p>In conclusion, the `viewport` meta tag is a fundamental element of responsive web design. It allows you to control how your website scales and renders on different devices, ensuring a consistent and user-friendly experience across all screen sizes. By understanding the attributes and how to use them effectively, you can create websites that adapt seamlessly to various devices. Remember to include the tag in the “ section of your HTML, and consider the implications of additional settings like <code class="" data-line="">maximum-scale</code>, <code class="" data-line="">minimum-scale</code>, and <code class="" data-line="">user-scalable</code>, especially concerning accessibility. Prioritize the user experience by testing your website on multiple devices and implementing responsive design techniques. This ensures your website looks great and performs well, ultimately contributing to better SEO and user satisfaction.</p>
<h2>FAQ</h2>
<ol>
<li><strong>What is the viewport meta tag?</strong><br /> The `viewport` meta tag is an HTML meta tag that provides instructions to the browser on how to control the page’s dimensions and scaling, essential for responsive web design.</li>
<li><strong>Why is the viewport meta tag important?</strong><br /> It’s important because it ensures your website renders correctly on different devices, preventing issues like shrinking and improper scaling, which can negatively impact user experience and SEO.</li>
<li><strong>What are the most common attributes of the viewport meta tag?</strong><br /> The most common attributes are <code class="" data-line="">width=device-width</code> and <code class="" data-line="">initial-scale=1.0</code>.</li>
<li><strong>Can I disable zooming with the viewport meta tag?</strong><br /> Yes, you can use the <code class="" data-line="">user-scalable=no</code> attribute. However, disabling zoom can negatively affect accessibility for users who need to zoom in to read content, so use it with caution.</li>
<li><strong>How do I implement the viewport meta tag?</strong><br /> Simply add the following line within the <code class="" data-line=""><head></code> section of your HTML document: <code class="" data-line=""><meta name="viewport" content="width=device-width, initial-scale=1.0"></code></li>
</ol>
<p>The `viewport` meta tag, while seemingly simple, is a cornerstone of modern web development. It’s the silent guardian of your website’s appearance, ensuring that your digital creations are accessible and enjoyable for everyone, regardless of the device they use. By understanding its purpose and implementing it correctly, you’re not just building a website; you’re crafting an experience that welcomes users with open arms, ready to adapt and thrive in our ever-evolving digital landscape.</p>
<div class="wpzoom-social-sharing-buttons-bottom"><div style="text-align:left" class="align-left wp-block-wpzoom-blocks-social-sharing"><ul class="social-sharing-icons"><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-facebook" style="padding:5px 15px;margin:5px 5px;border-radius:50px;color:#ffffff;background-color:#0866FF;" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwebdevfundamentals.com%2Fmastering-css-viewport-meta-tag-a-comprehensive-guide%2F&t=Mastering+CSS+%60Viewport%60+Meta+Tag%3A+A+Comprehensive+Guide" title="Facebook" target="_blank" rel="noopener noreferrer" data-platform="facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Facebook</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-x" style="padding:5px 15px;margin:5px 5px;border-radius:50px;color:#ffffff;background-color:#000000;" href="https://x.com/intent/tweet?url=https%3A%2F%2Fwebdevfundamentals.com%2Fmastering-css-viewport-meta-tag-a-comprehensive-guide%2F&text=Mastering+CSS+%60Viewport%60+Meta+Tag%3A+A+Comprehensive+Guide" title="Share on X" target="_blank" rel="noopener noreferrer" data-platform="x"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Share on X</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-threads" style="padding:5px 15px;margin:5px 5px;border-radius:50px;color:#ffffff;background-color:#000000;" href="https://threads.net/intent/post?text=Mastering+CSS+%60Viewport%60+Meta+Tag%3A+A+Comprehensive+Guide+https%3A%2F%2Fwebdevfundamentals.com%2Fmastering-css-viewport-meta-tag-a-comprehensive-guide%2F" title="Threads" target="_blank" rel="noopener noreferrer" data-platform="threads"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"/></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Threads</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-linkedin" style="padding:5px 15px;margin:5px 5px;border-radius:50px;color:#ffffff;background-color:#0966c2;" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwebdevfundamentals.com%2Fmastering-css-viewport-meta-tag-a-comprehensive-guide%2F" title="LinkedIn" target="_blank" rel="noopener noreferrer" data-platform="linkedin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">LinkedIn</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-pinterest" style="padding:5px 15px;margin:5px 5px;border-radius:50px;color:#ffffff;background-color:#E60023;" href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwebdevfundamentals.com%2Fmastering-css-viewport-meta-tag-a-comprehensive-guide%2F&media=&description=Mastering+CSS+%60Viewport%60+Meta+Tag%3A+A+Comprehensive+Guide" title="Pinterest" target="_blank" rel="noopener noreferrer" data-platform="pinterest" data-pin-custom="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Pinterest</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-reddit" style="padding:5px 15px;margin:5px 5px;border-radius:50px;color:#ffffff;background-color:#FF4500;" href="https://www.reddit.com/submit?url=https%3A%2F%2Fwebdevfundamentals.com%2Fmastering-css-viewport-meta-tag-a-comprehensive-guide%2F&title=Mastering+CSS+%60Viewport%60+Meta+Tag%3A+A+Comprehensive+Guide" title="Reddit" target="_blank" rel="noopener noreferrer" data-platform="reddit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M22 12.068a2.184 2.184 0 0 0-2.186-2.186c-.592 0-1.13.233-1.524.609-1.505-1.075-3.566-1.774-5.86-1.864l1.004-4.695 3.261.699A1.56 1.56 0 1 0 18.255 3c-.61-.001-1.147.357-1.398.877l-3.638-.77a.382.382 0 0 0-.287.053.348.348 0 0 0-.161.251l-1.112 5.233c-2.33.072-4.426.77-5.95 1.864a2.201 2.201 0 0 0-1.523-.61 2.184 2.184 0 0 0-.896 4.176c-.036.215-.053.43-.053.663 0 3.37 3.924 6.111 8.763 6.111s8.763-2.724 8.763-6.11c0-.216-.017-.449-.053-.664A2.207 2.207 0 0 0 22 12.068Zm-15.018 1.56a1.56 1.56 0 0 1 3.118 0c0 .86-.699 1.558-1.559 1.558-.86.018-1.559-.699-1.559-1.559Zm8.728 4.139c-1.076 1.075-3.119 1.147-3.71 1.147-.61 0-2.652-.09-3.71-1.147a.4.4 0 0 1 0-.573.4.4 0 0 1 .574 0c.68.68 2.114.914 3.136.914 1.022 0 2.473-.233 3.136-.914a.4.4 0 0 1 .574 0 .436.436 0 0 1 0 .573Zm-.287-2.563a1.56 1.56 0 0 1 0-3.118c.86 0 1.56.699 1.56 1.56 0 .841-.7 1.558-1.56 1.558Z"></path></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Reddit</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-telegram" style="padding:5px 15px;margin:5px 5px;border-radius:50px;color:#ffffff;background-color:#0088cc;" href="https://t.me/share/url?url=https%3A%2F%2Fwebdevfundamentals.com%2Fmastering-css-viewport-meta-tag-a-comprehensive-guide%2F&text=Mastering+CSS+%60Viewport%60+Meta+Tag%3A+A+Comprehensive+Guide" title="Telegram" target="_blank" rel="noopener noreferrer" data-platform="telegram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Telegram</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-whatsapp" style="padding:5px 15px;margin:5px 5px;border-radius:50px;color:#ffffff;background-color:#25D366;" href="https://api.whatsapp.com/send?text=Mastering+CSS+%60Viewport%60+Meta+Tag%3A+A+Comprehensive+Guide+https%3A%2F%2Fwebdevfundamentals.com%2Fmastering-css-viewport-meta-tag-a-comprehensive-guide%2F" title="WhatsApp" target="_blank" rel="noopener noreferrer" data-platform="whatsapp"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">WhatsApp</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-bluesky" style="padding:5px 15px;margin:5px 5px;border-radius:50px;color:#ffffff;background-color:#1DA1F2;" href="https://bsky.app/intent/compose?text=Mastering+CSS+%60Viewport%60+Meta+Tag%3A+A+Comprehensive+Guide+https%3A%2F%2Fwebdevfundamentals.com%2Fmastering-css-viewport-meta-tag-a-comprehensive-guide%2F" title="Bluesky" target="_blank" rel="noopener noreferrer" data-platform="bluesky"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Bluesky</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-email" style="padding:5px 15px;margin:5px 5px;border-radius:50px;color:#ffffff;background-color:#333333;" href="mailto:?subject=Mastering+CSS+%60Viewport%60+Meta+Tag%3A+A+Comprehensive+Guide&body=https%3A%2F%2Fwebdevfundamentals.com%2Fmastering-css-viewport-meta-tag-a-comprehensive-guide%2F" title="Email" target="_blank" rel="noopener noreferrer" data-platform="email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-.4 4.25l-7.07 4.42c-.32.2-.74.2-1.06 0L4.4 8.25c-.25-.16-.4-.43-.4-.72 0-.67.73-1.07 1.3-.72L12 11l6.7-4.19c.57-.35 1.3.05 1.3.72 0 .29-.15.56-.4.72z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Email</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-copy-link" style="padding:5px 15px;margin:5px 5px;border-radius:50px;color:#ffffff;background-color:#333333;" href="#copy-link" title="Copy Link" data-platform="copy-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Copy Link</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-print" style="padding:5px 15px;margin:5px 5px;border-radius:50px;color:#ffffff;background-color:#333333;" href="#print" title="Print" data-platform="print"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Print</span></a></li></ul><script>
document.addEventListener("DOMContentLoaded", function() {
var copyLinks = document.querySelectorAll("a[data-platform='copy-link']");
copyLinks.forEach(function(link) {
if (link.hasAttribute("data-listener-added")) return;
link.setAttribute("data-listener-added", "true");
link.addEventListener("click", function(e) {
e.preventDefault();
var tempInput = document.createElement("input");
tempInput.value = window.location.href;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
var originalText = this.querySelector(".social-sharing-icon-label")?.textContent || "";
var originalTitle = this.getAttribute("title");
var originalIcon = this.querySelector("svg").outerHTML;
// Show success feedback
this.setAttribute("title", "Copied!");
this.classList.add("copied");
if (this.querySelector(".social-sharing-icon-label")) {
this.querySelector(".social-sharing-icon-label").textContent = "Copied!";
} else {
this.querySelector("svg").outerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" /></svg>';
}
var self = this;
setTimeout(function() {
self.setAttribute("title", originalTitle);
self.classList.remove("copied");
if (self.querySelector(".social-sharing-icon-label")) {
self.querySelector(".social-sharing-icon-label").textContent = originalText;
} else {
self.querySelector("svg").outerHTML = originalIcon;
}
}, 2000);
});
});
});
</script><script>
document.addEventListener("DOMContentLoaded", function() {
var printLinks = document.querySelectorAll("a[data-platform='print']");
printLinks.forEach(function(link) {
if (link.hasAttribute("data-listener-added")) return;
link.setAttribute("data-listener-added", "true");
link.addEventListener("click", function(e) {
e.preventDefault();
window.print();
});
});
});
</script></div></div></div>
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<div class="taxonomy-post_tag is-style-post-terms-1 is-style-post-terms-1--2 wp-block-post-terms"><a href="https://webdevfundamentals.com/tag/css/" rel="tag">CSS</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/front-end/" rel="tag">front-end</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/html/" rel="tag">HTML</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/meta-tag/" rel="tag">meta tag</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/mobile-first/" rel="tag">mobile-first</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/responsive-design/" rel="tag">Responsive Design</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/seo/" rel="tag">SEO</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/viewport/" rel="tag">viewport</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/web-development/" rel="tag">web development</a></div>
</div>
<div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow" style="margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60);">
<nav class="wp-block-group alignwide is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-878fe601 wp-block-group-is-layout-flex" aria-label="Post navigation" style="border-top-color:var(--wp--preset--color--accent-6);border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)">
<div class="post-navigation-link-previous wp-block-post-navigation-link"><span class="wp-block-post-navigation-link__arrow-previous is-arrow-arrow" aria-hidden="true">←</span><a href="https://webdevfundamentals.com/mastering-css-object-fit-a-comprehensive-guide-for-web-developers/" rel="prev">Mastering CSS `Object-Fit`: A Comprehensive Guide for Web Developers</a></div>
<div class="post-navigation-link-next wp-block-post-navigation-link"><a href="https://webdevfundamentals.com/mastering-css-overflow-a-comprehensive-guide-for-web-developers/" rel="next">Mastering CSS `overflow`: A Comprehensive Guide for Web Developers</a><span class="wp-block-post-navigation-link__arrow-next is-arrow-arrow" aria-hidden="true">→</span></div>
</nav>
</div>
</div>
<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<h2 class="wp-block-heading alignwide has-small-font-size" style="font-style:normal;font-weight:700;letter-spacing:1.4px;text-transform:uppercase">More posts</h2>
<div class="wp-block-query alignwide is-layout-flow wp-block-query-is-layout-flow">
<ul class="alignfull wp-block-post-template is-layout-flow wp-container-core-post-template-is-layout-b4d04ffe wp-block-post-template-is-layout-flow"><li class="wp-block-post post-1403 post type-post status-publish format-standard hentry category-web-development">
<div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-cba70755 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<h3 class="wp-block-post-title has-large-font-size"><a href="https://webdevfundamentals.com/svelte-5-runes-the-definitive-guide-to-modern-reactivity/" target="_self" >Svelte 5 Runes: The Definitive Guide to Modern Reactivity</a></h3>
<div class="has-text-align-right wp-block-post-date"><a href="https://webdevfundamentals.com/svelte-5-runes-the-definitive-guide-to-modern-reactivity/"><time datetime="2026-04-04T11:47:59+00:00">April 4, 2026</time></a></div>
</div>
</li><li class="wp-block-post post-1402 post type-post status-publish format-standard hentry category-web-development">
<div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-cba70755 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<h3 class="wp-block-post-title has-large-font-size"><a href="https://webdevfundamentals.com/mastering-svelte-actions-the-ultimate-guide-to-custom-dom-logic/" target="_self" >Mastering Svelte Actions: The Ultimate Guide to Custom DOM Logic</a></h3>
<div class="has-text-align-right wp-block-post-date"><a href="https://webdevfundamentals.com/mastering-svelte-actions-the-ultimate-guide-to-custom-dom-logic/"><time datetime="2026-04-04T11:42:58+00:00">April 4, 2026</time></a></div>
</div>
</li><li class="wp-block-post post-1401 post type-post status-publish format-standard hentry category-web-development">
<div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-cba70755 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<h3 class="wp-block-post-title has-large-font-size"><a href="https://webdevfundamentals.com/mastering-svelte-5-runes-the-future-of-reactive-state-management/" target="_self" >Mastering Svelte 5 Runes: The Future of Reactive State Management</a></h3>
<div class="has-text-align-right wp-block-post-date"><a href="https://webdevfundamentals.com/mastering-svelte-5-runes-the-future-of-reactive-state-management/"><time datetime="2026-04-04T11:38:03+00:00">April 4, 2026</time></a></div>
</div>
</li><li class="wp-block-post post-1398 post type-post status-publish format-standard hentry category-web-development">
<div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-cba70755 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<h3 class="wp-block-post-title has-large-font-size"><a href="https://webdevfundamentals.com/mastering-svelte-stores-the-ultimate-guide-to-state-management/" target="_self" >Mastering Svelte Stores: The Ultimate Guide to State Management</a></h3>
<div class="has-text-align-right wp-block-post-date"><a href="https://webdevfundamentals.com/mastering-svelte-stores-the-ultimate-guide-to-state-management/"><time datetime="2026-04-04T11:28:00+00:00">April 4, 2026</time></a></div>
</div>
</li></ul>
</div>
</div>
</main>
<footer class="wp-block-template-part">
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)">
<div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow"><div class="is-default-size wp-block-site-logo"><a href="https://webdevfundamentals.com/" class="custom-logo-link" rel="home"><img width="390" height="260" src="https://webdevfundamentals.com/wp-content/uploads/2026/02/ChatGPT_Image_Feb_12__2026__08_35_12_PM-removebg-preview-edited.png" class="custom-logo" alt="WebDevFundamentals Site Logo" decoding="async" fetchpriority="high" srcset="https://webdevfundamentals.com/wp-content/uploads/2026/02/ChatGPT_Image_Feb_12__2026__08_35_12_PM-removebg-preview-edited.png 390w, https://webdevfundamentals.com/wp-content/uploads/2026/02/ChatGPT_Image_Feb_12__2026__08_35_12_PM-removebg-preview-edited-300x200.png 300w" sizes="(max-width: 390px) 100vw, 390px" /></a></div>
<div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-cf54d0a6 wp-block-group-is-layout-flex">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"><p class="wp-block-site-tagline">From Fundamentals to Real-World Web Apps.</p></div>
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div style="height:var(--wp--preset--spacing--40);width:0px" aria-hidden="true" class="wp-block-spacer"></div>
</div>
</div>
</div>
<div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-2ab8c7fb wp-block-group-is-layout-flex">
<p class="has-small-font-size wp-block-paragraph">© 2026 • WebDevFundamentals</p>
<p class="has-small-font-size wp-block-paragraph">Inquiries: <strong><a href="mailto:admin@codingeasypeasy.com">admin@webdevfundamentals.com</a></strong></p>
</div>
</div>
</div>
</footer>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/twentytwentyfive/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<div class="wp-dark-mode-floating-switch wp-dark-mode-ignore wp-dark-mode-animation wp-dark-mode-animation-bounce " style="right: 10px; bottom: 10px;">
<!-- call to action -->
<div class="wp-dark-mode-switch wp-dark-mode-ignore " tabindex="0" role="switch" aria-label="Dark Mode Toggle" aria-checked="false" data-style="1" data-size="1" data-text-light="" data-text-dark="" data-icon-light="" data-icon-dark=""></div></div><script data-wp-router-options="{"loadOnClientNavigation":true}" fetchpriority="low" id="@wordpress/block-library/navigation/view-js-module" src="https://webdevfundamentals.com/wp-includes/js/dist/script-modules/block-library/navigation/view.min.js?ver=1bf28ded04f9f188bdcb" type="module"></script>
<!-- Koko Analytics v2.5.2 - https://www.kokoanalytics.com/ -->
<script>
(()=>{var e=window.koko_analytics,s=["utm_source","utm_medium","utm_campaign"],d=/bot|crawl|spider|seo|lighthouse|facebookexternalhit|preview|prerender|headless|phantom|scrapy|python|curl|wget|go-http|okhttp|node-fetch|axios|java\/|libwww|http[-_]?client|monitor|uptime|pingdom|statuscake|validator|scanner/i;function u(){let t={},n=new URLSearchParams(window.location.search),c=new URLSearchParams(window.location.hash.substring(1));return s.forEach(a=>{let o=n.get(a)||c.get(a);o&&(t[a]=o)}),t}function h(t,n){if(typeof navigator.sendBeacon=="function"){navigator.sendBeacon(t,n);return}fetch(t,{method:"POST",body:n,keepalive:!0,credentials:"same-origin"}).catch(()=>{})}e.trackPageview=function(t,n){if(d.test(navigator.userAgent)||window._phantom||window.__nightmare||window.navigator.webdriver||window.Cypress){console.debug("Koko Analytics: Ignoring call to trackPageview because user agent is a bot or this is a headless browser.");return}h(e.url,new URLSearchParams({action:"koko_analytics_collect",pa:t,po:n,r:document.referrer.indexOf(e.site_url)==0?"":document.referrer,m:e.use_cookie?"c":e.method[0],...u()}))};function r(){e.trackPageview(e.path,e.post_id)}function i(){e.autotracked||(r(),e.autotracked=!0)}document.prerendering?document.addEventListener("prerenderingchange",i,{once:!0}):document.visibilityState==="hidden"||document.visibilityState==="prerender"?document.addEventListener("visibilitychange",()=>{document.visibilityState==="visible"&&i()}):i();window.addEventListener("pageshow",t=>{t.persisted&&r()});})();
</script>
<script>document.addEventListener("DOMContentLoaded", function() {
// ---------- CONFIG ----------
const MONETAG_URL = "https://omg10.com/4/10781348";
const STORAGE_KEY = "monetagLastShown";
const COOLDOWN = 24*60*60*1000; // 24 hours
// ---------- CREATE MODAL HTML ----------
const modalHTML = `
<div id="monetagModal" style="
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
visibility:hidden;
opacity:0;
transition: opacity 0.3s ease;
">
<div style="
background:#fff;
padding:25px;
border-radius:10px;
max-width:400px;
text-align:center;
box-shadow:0 4px 15px rgba(0,0,0,0.3);
">
<h2>Welcome! 👋</h2>
<p>Thanks for visiting! Before you continue, click the button below to unlock exclusive content and surprises just for you.</p>
<button class="monetagBtn" style="
padding:10px 20px;
background:#dc3545;
color:#fff;
border:none;
border-radius:5px;
cursor:pointer;
margin-top:15px;
">Not Now</button>
<button class="monetagBtn" style="
padding:10px 20px;
background:#ff5722;
color:#fff;
border:none;
border-radius:5px;
cursor:pointer;
margin-top:15px;
">Continue</button>
</div>
</div>
`;
document.body.insertAdjacentHTML("beforeend", modalHTML);
// ---------- GET ELEMENTS ----------
const modal = document.getElementById("monetagModal");
const buttons = document.querySelectorAll(".monetagBtn");
// ---------- SHOW MODAL ON PAGE LOAD ----------
window.addEventListener("load", function(){
modal.style.visibility = "visible";
modal.style.opacity = "1";
});
// ---------- CHECK 24H COOLDOWN ----------
function canShow() {
const last = localStorage.getItem(STORAGE_KEY);
return !last || (Date.now() - parseInt(last)) > COOLDOWN;
}
// ---------- TRIGGER MONETAG ----------
buttons.forEach(btn => {
btn.addEventListener("click", function(){
if(canShow()){
localStorage.setItem(STORAGE_KEY, Date.now());
window.open(MONETAG_URL,"_blank");
}
// hide modal after click
modal.style.opacity = "0";
setTimeout(()=>{ modal.style.visibility="hidden"; },300);
});
});
});</script><script id="prismatic-prism-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/prism-core.js?ver=3.7.5"></script>
<script id="prismatic-prism-toolbar-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-toolbar.js?ver=3.7.5"></script>
<script id="prismatic-prism-line-highlight-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-line-highlight.js?ver=3.7.5"></script>
<script id="prismatic-prism-line-numbers-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-line-numbers.js?ver=3.7.5"></script>
<script id="prismatic-copy-clipboard-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-copy-clipboard.js?ver=3.7.5"></script>
<script id="prismatic-command-line-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-command-line.js?ver=3.7.5"></script>
<script id="prismatic-prism-css-js" src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/lang-css.js?ver=3.7.5"></script>
<script id="zoom-social-icons-widget-frontend-js" src="https://webdevfundamentals.com/wp-content/plugins/social-icons-widget-by-wpzoom/assets/js/social-icons-widget-frontend.js?ver=1787975027"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://webdevfundamentals.com/wp-includes/js/wp-emoji-release.min.js?ver=7.1"}}
</script>
<script type="module">
/*! This file is auto-generated */
var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))});
//# sourceURL=https://webdevfundamentals.com/wp-includes/js/wp-emoji-loader.min.js
</script>
<script>
(function() {
function applyScrollbarStyles() {
if (!document.documentElement.hasAttribute('data-wp-dark-mode-active')) {
document.documentElement.style.removeProperty('scrollbar-color');
return;
}
document.documentElement.style.setProperty('scrollbar-color', '#2E334D #1D2033', 'important');
// Find and remove dark mode engine scrollbar styles.
var styles = document.querySelectorAll('style');
styles.forEach(function(style) {
if (style.id === 'wp-dark-mode-scrollbar-custom') return;
if (style.textContent && style.textContent.indexOf('::-webkit-scrollbar') !== -1 && style.textContent.indexOf('#1D2033') === -1) {
style.textContent = style.textContent.replace(/::-webkit-scrollbar[^}]*\{[^}]*\}/g, '');
style.textContent = style.textContent.replace(/::-webkit-scrollbar-track[^}]*\{[^}]*\}/g, '');
style.textContent = style.textContent.replace(/::-webkit-scrollbar-thumb[^{]*\{[^}]*\}/g, '');
style.textContent = style.textContent.replace(/::-webkit-scrollbar-corner[^}]*\{[^}]*\}/g, '');
}
});
// Inject our styles.
var existing = document.getElementById('wp-dark-mode-scrollbar-custom');
if (!existing) {
var customStyle = document.createElement('style');
customStyle.id = 'wp-dark-mode-scrollbar-custom';
customStyle.textContent =
'::-webkit-scrollbar { width: 12px !important; height: 12px !important; background: #1D2033 !important; }' +
'::-webkit-scrollbar-track { background: #1D2033 !important; }' +
'::-webkit-scrollbar-thumb { background: #2E334D !important; border-radius: 6px; }' +
'::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }' +
'::-webkit-scrollbar-corner { background: #1D2033 !important; }';
document.body.appendChild(customStyle);
}
}
// Listen for dark mode changes.
document.addEventListener('wp_dark_mode', function(e) {
setTimeout(applyScrollbarStyles, 100);
setTimeout(applyScrollbarStyles, 500);
setTimeout(applyScrollbarStyles, 1000);
});
// Observe attribute changes.
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'data-wp-dark-mode-active') {
var existing = document.getElementById('wp-dark-mode-scrollbar-custom');
if (existing && !document.documentElement.hasAttribute('data-wp-dark-mode-active')) {
existing.remove();
}
setTimeout(applyScrollbarStyles, 100);
setTimeout(applyScrollbarStyles, 500);
}
});
});
observer.observe(document.documentElement, { attributes: true });
// Initial apply.
setTimeout(applyScrollbarStyles, 100);
setTimeout(applyScrollbarStyles, 500);
setTimeout(applyScrollbarStyles, 1000);
})();
</script>
</body>
</html>
