skills.rest
Luqman-Ud-Din
Luqman-Ud-DinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qa-detect-viewport-meta

Detect missing or misconfigured viewport meta tags in web pages.

Updated May 22, 2026
Search Tags:#responsive design#wcag#viewport#mobile accessibility#meta tag
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-viewport-meta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-detect-viewport-meta
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-detect-viewport-meta
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-viewport-meta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill detects viewport meta tag issues that silently break responsive layouts, disable pinch zoom, and harm mobile accessibility across browsers and devices.

Core Features & Use Cases

  • Missing viewport detection: Flags pages with no viewport meta tag, which causes mobile browsers to render pages at desktop widths.
  • Responsive configuration checks: Verifies that width=device-width is present and warns when scaling restrictions like user-scalable=no or maximum-scale=1 block zoom.
  • Use case: Run it on a frontend app before release to catch layout failures and accessibility regressions that only appear on phones or tablets.

Quick Start

Ask the agent to scan the current app for viewport meta tag problems and report any responsive or accessibility issues it finds.

Frequently Asked Questions about qa-detect-viewport-meta

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my responsive design break on mobile devices?▼

Your responsive design likely breaks on mobile devices because the viewport meta tag is missing or misconfigured, causing browsers to render pages at desktop widths instead of matching the device width. This Skill detects such head metadata issues.

How do I check if my viewport meta tag blocks pinch zoom for accessibility?▼

To check if your viewport meta tag blocks pinch zoom, scan the head metadata for user-scalable=no or maximum-scale=1 restrictions. This Skill flags these WCAG mobile accessibility violations automatically.

What viewport meta tag configuration do I need for PWA viewport-fit?▼

For PWA viewport-fit, you need a viewport meta tag that includes width=device-width and proper viewport-fit behavior. This Skill inspects head metadata to verify these PWA configurations are present and valid.

Can I detect missing viewport meta tags before releasing a frontend app?▼

Yes, you can detect missing viewport meta tags before release by running an automated scan on your frontend app. This Skill reports missing tags and responsive rendering issues across browser-based user interfaces.

How do I scan my web page for mobile accessibility regressions related to scaling?▼

Scan your web page head metadata to find maximum-scale limits and user-scalable restrictions that harm mobile accessibility. This Skill identifies these scaling configurations and reports accessibility regressions automatically.

Related Skills

Explore More Software Engineering Skills→
mwolff328-stackmwolff328-stack
1

frontend-slides

Generates self-contained, animation-rich HTML presentations from content or PowerPoint files.

Community
Advanced
PriyanshKuniyalPriyanshKuniyal

wcag-audit-patterns

Automate WCAG 2.2 accessibility audits and provide remediation guidance.

Community
Advanced
flitzrrrflitzrrr
4

responsive-design

Implement mobile-first CSS with fluid grids, responsive images, and touch optimization.

Community
Intermediate
hulusi-tunchulusi-tunc
3

gesture-alternatives

Identify accessible alternatives to gesture-based UI interactions for inclusive design.

Community
Intermediate