skills.rest
daviswhitehead
daviswhiteheadCOMMUNITY
Explore all skills by this author →
Website𝕏@dwhiteheadtimeGitHub

mobile-debugging

Diagnose and fix mobile UI bugs on iOS Safari and Android Chrome.

Updated Jan 26, 2026
Search Tags:#ios#android#keyboard#viewport#touch#debugging-patterns#mobile-debugging
One-click install
npx skills add https://github.com/daviswhitehead/product-playbook-for-agentic-coding-plugin --skill mobile-debugging-daviswhitehead
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-debugging
Source: https://github.com/daviswhitehead/product-playbook-for-agentic-coding-plugin/tree/main/plugins/product-playbook-for-agentic-coding/skills/mobile-debugging
Command: npx skills add https://github.com/daviswhitehead/product-playbook-for-agentic-coding-plugin --skill mobile-debugging-daviswhitehead

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mobile apps often exhibit UI and interaction bugs only on real devices, due to viewport, keyboard, and touch handling differences between platforms.

Core Features & Use Cases

  • Patterns for diagnosing and fixing common mobile bugs on real devices (iOS Safari and Android Chrome), including viewport sizing, keyboard interactions, and touch responsiveness.
  • Practical use cases cover input fields obscured by keyboards, incorrect viewport resizing, overscroll behavior, and layout height issues across devices.

Quick Start

Identify a real-device mobile bug and apply the iOS vs Android debugging patterns to fix the issue.

Frequently Asked Questions about mobile-debugging

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

FAQPage Schema
How do I fix input fields obscured by the mobile keyboard on iOS Safari and Android Chrome?▼

To fix input fields obscured by the mobile keyboard, apply debugging patterns that adjust viewport resizing and scroll behavior for iOS Safari and Android Chrome. This handles layout height issues triggered by keyboard appearance on real devices.

Why does my viewport sizing work on desktop but break with overscroll on real mobile devices?▼

Viewport sizing breaks on mobile due to platform differences in touch handling and overscroll behavior between iOS Safari and Android Chrome. Diagnosing these mobile-specific UI bugs requires real-device testing rather than desktop emulation.

What is the best way to debug touch responsiveness and overscroll issues across iOS and Android?▼

The best way to debug touch responsiveness and overscroll issues is applying targeted debugging patterns for iOS Safari and Android Chrome. This approach identifies platform-difference issues that only occur during real-device mobile interactions.

Does this approach require real-device testing to fix mobile UI bugs?▼

Real-device testing is required to fix mobile UI bugs because viewport sizing, keyboard interactions, and touch responsiveness differences only manifest on actual iOS Safari and Android Chrome hardware.

Related Skills

Explore More Software Engineering Skills→
ssdeanxssdeanx
43

browser

Automate Chrome browser tasks via Chrome DevTools Protocol over WebSocket.

Community
Intermediate
SmallRobSmallRob

react-mobile-app-dev

Build responsive React mobile Web apps with touch interaction and Core Web Vitals optimization.

Community
Intermediate
krzemienskikrzemienski
2

responsive-validation

Validate responsive UI layouts across device viewports and breakpoints.

Community
Advanced
riezriez
1

broken-ui-a11y-audit

Audit live web pages for visible UI and accessibility issues across viewports.

Community
Intermediate