Mobile Issues Demonstration

⚠️ Important Notice

This page contains intentional mobile issues for testing and educational purposes only. These examples demonstrate common mobile-specific problems like small touch targets, viewport issues, orientation problems, and mobile-specific bugs. Always test on real mobile devices and follow mobile design best practices in production.

Mobile Issues

The following examples demonstrate common mobile-specific problems:

1. Small Touch Targets Touch

Buttons and links that are too small to tap easily:

/* VIOLATION: Too small touch targets */
.button {
  width: 20px;
  height: 20px;
  padding: 2px;
}
/* Minimum should be 44x44px for easy tapping */
      

Tiny Link

These are too small to tap easily on mobile

2. Viewport Meta Tag Issues Viewport

Missing or incorrect viewport configuration:

<!-- VIOLATION: Missing viewport tag -->
<!-- No viewport meta tag -->
<!-- Page renders at desktop width on mobile -->

<!-- VIOLATION: Disabling zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Prevents users from zooming (accessibility issue) -->
      

Note: This page intentionally has user-scalable=no to demonstrate the issue

3. Elements Too Close Together Spacing

Interactive elements placed too close, causing accidental taps:

/* VIOLATION: Elements too close */
.button1 { margin: 1px; }
.button2 { margin: 1px; }
.button3 { margin: 1px; }
/* Should have at least 8px spacing between touch targets */
      

Too close together - easy to tap wrong button

4. Fixed Width Content Width

Content that doesn't adapt to screen width:

/* VIOLATION: Fixed width */
.container {
  width: 1200px;
  min-width: 1200px;
}
/* Causes horizontal scrolling on mobile */
      

This container is 1200px wide

It will cause horizontal scrolling on mobile devices

Try viewing on a phone or resizing your browser

5. Small Text Size Text

Text that's too small to read on mobile:

/* VIOLATION: Too small text */
.text {
  font-size: 10px;
  line-height: 1.2;
}
/* Minimum should be 16px to prevent auto-zoom on iOS */
      

This text is very small and hard to read on mobile

This is also too small

Still too small for comfortable reading

6. No Orientation Support Orientation

Layout that breaks when device is rotated:

/* VIOLATION: No orientation handling */
.container {
  width: 100%;
  height: 500px;
}
/* Doesn't adapt to landscape/portrait changes */
      

This layout doesn't adapt to orientation changes

Rotate your device to see the issue

7. Desktop-Only Navigation Navigation

Navigation that requires hover or doesn't work on touch:

/* VIOLATION: Hover-only navigation */
.menu-item:hover .submenu {
  display: block;
}
/* Submenu only appears on hover - doesn't work on touch */
      

Submenu only works on hover - not accessible on touch devices

8. Inappropriate Input Types Input

Using wrong input types that don't show proper mobile keyboards:

<!-- VIOLATION: Wrong input types -->
<input type="text" name="phone"> <!-- Should be type="tel" -->
<input type="text" name="email"> <!-- Should be type="email" -->
<input type="text" name="number"> <!-- Should be type="number" -->
<!-- Wrong keyboard shown on mobile -->
      

9. Horizontal Scrolling Required Scrolling

Content that forces horizontal scrolling:

/* VIOLATION: Forces horizontal scroll */
.table {
  width: 2000px;
  overflow-x: auto;
}
/* Wide tables, images, or content cause horizontal scroll */
      

This content is 2000px wide and forces horizontal scrolling on mobile

Users have to scroll horizontally to see everything

10. No Touch Action Optimization Touch

Missing touch-action CSS property causing delays:

/* VIOLATION: No touch-action */
.button {
  /* Missing touch-action: manipulation; */
}
/* Causes 300ms click delay on mobile */
      

11. Fixed Position Elements Covering Content Position

Fixed headers/footers that cover important content:

/* VIOLATION: Fixed element covers content */
.header {
  position: fixed;
  top: 0;
  height: 100px;
  z-index: 9999;
}
.content {
  margin-top: 0; /* Content hidden behind header */
}
      

Fixed Header (covers content)

This content is partially hidden behind the fixed header

Users can't see the beginning of the content

12. No Swipe Gesture Alternatives Gestures

Features that only work with swipe gestures:

<!-- VIOLATION: Swipe-only interaction -->
<div class="carousel">
  <!-- Only works with swipe -->
  <!-- No buttons to navigate -->
  <!-- No keyboard support -->
</div>
      

Swipe to navigate (no alternative controls)

Carousel Item 1

Only works with swipe gesture - no buttons

13. Mobile Keyboard Covers Input Fields Keyboard

Input fields that get covered by mobile keyboard:

/* VIOLATION: No scroll into view */
input {
  /* When keyboard appears, input may be covered */
  /* No scrollIntoView or viewport adjustment */
}
      

Scroll down to see input field

On mobile, keyboard may cover this input

14. No Mobile-Specific Optimizations Optimization

Missing mobile-specific features and optimizations:

<!-- VIOLATION: Missing mobile optimizations -->
<!-- No apple-touch-icon -->
<!-- No theme-color meta tag -->
<!-- No mobile-web-app-capable -->
<!-- Large images not optimized for mobile -->
<!-- No mobile-specific navigation patterns -->
      

15. Pinch-to-Zoom Disabled Zoom

Preventing users from zooming (accessibility issue):

<!-- VIOLATION: Disabled zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Prevents users with visual impairments from zooming -->
<!-- Accessibility violation -->
      

Note: This page intentionally has user-scalable=no to demonstrate the issue

Mobile Best Practices

The following examples demonstrate proper mobile design practices:

1. Proper Touch Target Sizes Touch

/* Compliant: Proper touch targets */
.button {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 24px;
}
/* Minimum 44x44px for easy tapping */
      

✓ Minimum 44x44px touch targets

2. Proper Viewport Configuration Viewport

<!-- Compliant: Proper viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<!-- Allows zooming for accessibility -->
<!-- Responsive to device width -->
      

3. Adequate Spacing Between Elements Spacing

/* Compliant: Adequate spacing */
.button {
  margin: 8px;
  padding: 12px 24px;
}
/* At least 8px spacing between touch targets */
      

✓ 8px+ spacing prevents accidental taps

4. Responsive Widths Width

/* Compliant: Responsive widths */
.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 16px;
}
/* Adapts to screen width, no horizontal scroll */
      

Responsive container that adapts to screen width

No horizontal scrolling on any device

5. Readable Text Sizes Text

/* Compliant: Readable text */
body {
  font-size: 16px; /* Prevents auto-zoom on iOS */
  line-height: 1.6;
}
/* Minimum 16px for body text */
      

This text is 16px and easy to read on mobile

Slightly larger for emphasis

Headings are larger and clear

6. Orientation Support Orientation

/* Compliant: Orientation support */
@media (orientation: portrait) {
  .container {
    flex-direction: column;
  }
}

@media (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}
/* Adapts to device orientation */
      

7. Touch-Friendly Navigation Navigation

<!-- Compliant: Touch-friendly navigation -->
<button onclick="toggleMenu()">Menu</button>
<nav id="menu">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
</nav>
<!-- Works with touch, no hover required -->
      

✓ Touch-friendly, no hover required

8. Appropriate Input Types Input

<!-- Compliant: Appropriate input types -->
<input type="tel" name="phone"> <!-- Shows number pad -->
<input type="email" name="email"> <!-- Shows email keyboard -->
<input type="number" name="quantity"> <!-- Shows number pad -->
<input type="url" name="website"> <!-- Shows URL keyboard -->
      

✓ Correct input types show appropriate keyboards

9. No Horizontal Scrolling Scrolling

/* Compliant: No horizontal scroll */
.container {
  width: 100%;
  overflow-x: hidden;
}
.table-wrapper {
  overflow-x: auto; /* Only for tables, with proper handling */
}
/* Content fits within viewport */
      

10. Touch Action Optimization Touch

/* Compliant: Touch action optimization */
.button {
  touch-action: manipulation;
}
/* Removes 300ms click delay */
/* Improves responsiveness */
      

11. Proper Fixed Position Handling Position

/* Compliant: Proper fixed positioning */
.header {
  position: fixed;
  top: 0;
  height: 60px;
  z-index: 100;
}
.content {
  margin-top: 60px; /* Accounts for fixed header */
  padding-top: 20px;
}
/* Content not hidden behind fixed elements */
      

12. Swipe Gestures with Alternatives Gestures

<!-- Compliant: Swipe with alternatives -->
<div class="carousel">
  <button onclick="prev()">Previous</button>
  <div class="slides">...</div>
  <button onclick="next()">Next</button>
</div>
<!-- Swipe works, but buttons also available -->
      

Carousel Item 1

✓ Navigation buttons + swipe gesture support

13. Keyboard Handling Keyboard

// Compliant: Scroll input into view
input.addEventListener('focus', function() {
  setTimeout(() => {
    this.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }, 300); // Wait for keyboard animation
});
/* Ensures input is visible when keyboard appears */
      

14. Mobile-Specific Optimizations Optimization

<!-- Compliant: Mobile optimizations -->
<link rel="apple-touch-icon" href="icon-180x180.png">
<meta name="theme-color" content="#6366f1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Better mobile experience -->
      

15. Zoom Support Enabled Zoom

<!-- Compliant: Zoom enabled -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<!-- Allows users to zoom for accessibility -->
<!-- Important for users with visual impairments -->
      

16. Mobile-Friendly Tables Tables

/* Compliant: Mobile-friendly tables */
@media (max-width: 768px) {
  table {
    display: block;
  }
  tr {
    display: block;
    margin-bottom: 16px;
  }
  td {
    display: block;
    text-align: right;
  }
  td::before {
    content: attr(data-label) ": ";
    float: left;
    font-weight: bold;
  }
}
/* Tables stack on mobile instead of scrolling */
      

About This Page

This page is designed for:

Testing mobile analysis tools
Training developers on mobile design best practices
Understanding mobile-specific issues
Learning about touch interfaces and mobile UX

Remember: Always test on real mobile devices, use proper viewport settings, ensure touch targets are at least 44x44px, allow zooming for accessibility, and optimize for mobile performance. Mobile users have different needs than desktop users.