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)}();This tool streamlines your mobile optimization by:
- Automatically detecting viewport meta tag
- Checking for optimal viewport configuration
- Displaying current viewport settings
- Showing recommended configuration
- Working on any webpage instantly
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.
- Previous: Check Meta Description
- Next: Check Open Graph Tags