Check Mobile Viewport

The Check Mobile Viewport Bookmarklet is an essential tool for mobile optimization and responsive design verification.

With one click, this bookmarklet checks if the page has proper mobile viewport configuration.

Perfect for quick mobile optimization audits and responsive design verification. No more manual inspection - just click and check!

javascript:!function(){const n=document.querySelector('meta[name="viewport"]'),t=n?n.content:"",e=null!==n,i=t.includes("width=device-width")&&t.includes("initial-scale=1"),o=document.createElement("div");o.style.cssText="\n        position: fixed;\n        top: 20px;\n        right: 20px;\n        width: 80%;\n        max-width: 800px;\n        max-height: 80vh;\n        background: white;\n        padding: 20px;\n        border-radius: 8px;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        z-index: 10000;\n        overflow-y: auto;\n    ";const d=document.createElement("div");d.innerHTML=`\n        <h2 style="margin-top: 0;">Mobile Viewport Analysis</h2>\n        <div style="margin-bottom: 20px;">\n            <button onclick="this.closest('.seo-popup').remove()" style="float: right;">Close</button>\n        </div>\n        <div style="margin-bottom: 20px; padding: 10px; border: 1px solid ${i?"#4CAF50":"#ff4444"}; border-radius: 4px;">\n            <h3 style="margin: 0 0 10px 0;">Status</h3>\n            <p style="margin: 0; color: ${i?"#4CAF50":"#ff4444"}">\n                ${e?i?"Proper mobile viewport configured":"Viewport configured but not optimal":"No viewport meta tag found"}\n            </p>\n        </div>\n        <div style="margin-bottom: 20px;">\n            <h3 style="margin: 0 0 10px 0;">Viewport Configuration</h3>\n            ${e?`<p style="margin: 0; padding: 10px; background: #f5f5f5; border-radius: 4px;">${t}</p>`:'<p style="margin: 0;">No viewport meta tag found in the document.</p>'}\n        </div>\n        <div style="margin-bottom: 20px;">\n            <h3 style="margin: 0 0 10px 0;">Recommended Configuration</h3>\n            <p style="margin: 0;">For optimal mobile display, use:</p>\n            <pre style="margin: 5px 0 0 0; padding: 10px; background: #f5f5f5; border-radius: 4px;"><meta name="viewport" content="width=device-width, initial-scale=1"></pre>\n        </div>\n    `,o.classList.add("seo-popup"),o.appendChild(d),document.body.appendChild(o)}();
Drag me to bookmark bar: 👉🏻 Check Mobile Viewport

This tool streamlines your mobile optimization by:

Why Use the Mobile Viewport Checker?

This essential tool makes mobile viewport verification effortless. Perfect for web developers, designers, and anyone who needs to ensure proper mobile display. Simply click the bookmarklet to instantly check if a page has the correct viewport configuration. Helps you quickly identify pages that need mobile optimization and ensure better responsive design across all devices.