12 Essential Mobile Web Issues and How to Fix Them

Mobile development inevitably encounters a series of device‑specific issues; here are common mobile problems and their solutions.

1. 1px Border Issue

On high‑resolution screens, a 1px border appears thicker.

.border-1px {
  position: relative;
}
.border-1px::after {
  position: absolute;
  content: '';
  width: 200%;
  height: 200%;
  border: 1px solid #999;
  transform: scale(0.5);
  transform-origin: left top;
}

2. 300ms Click Delay Issue

Mobile browsers add a 300 ms delay to detect double‑taps.

// Solution 1: Use FastClick library
document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
});

// Solution 2: Use CSS approach
html {
    touch-action: manipulation;
}

3. Soft Keyboard Popup Issue

When the soft keyboard appears, it may cover input fields.

const input = document.querySelector('input');
input.addEventListener('focus', () => {
    setTimeout(() => {
        window.scrollTo(0, document.body.scrollHeight);
    }, 300);
});

4. Scroll Penetration Issue

When a modal appears, the background can still scroll.

// When modal opens
document.body.style.position = 'fixed';
document.body.style.width = '100%';
document.body.style.top = -window.scrollY + 'px';

// When modal closes
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.width = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);

5. Page Adaptation Issue

Inconsistent screen sizes across devices cause layout adaptation problems.

// Solution 1: Use rem for scaling
html {
    font-size: calc(100vw / 375 * 16);
}

/* Solution 2: Use vw for scaling */
.container {
    width: 100vw;
    height: 100vh;
}

6. iOS Rubber‑Band Scrolling Effect

iOS’s bounce effect at the top or bottom of a scroll impacts user experience.

body {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.scroll-container {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

7. Safe Area Adaptation Issue

Notches and bottom virtual button areas can obscure content.

/* iOS safe‑area adaptation */
.container {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

8. WeChat Long‑Press Image Save Issue

In the WeChat browser, long‑pressing an image brings up a save option.

img {
    -webkit-touch-callout: none;
    pointer-events: none;
    user-select: none;
}

9. Scrollbar Style Issue

Default scrollbar styles are unaesthetic.

.scroll-container::-webkit-scrollbar {
    display: none;
}

/* Or customize scrollbar */
.scroll-container::-webkit-scrollbar {
    width: 4px;
}
.scroll-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

10. Image Resource Loading Optimization

Large images affect page performance.

// Use lazy loading
const lazyImages = document.querySelectorAll('img[data-src]');
const lazyLoad = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            lazyLoad.unobserve(img);
        }
    });
});

lazyImages.forEach(img => lazyLoad.observe(img));

11. Form Input Optimization

Mobile input experience is suboptimal.

<!-- Numeric keypad -->
<input type="tel" pattern="[0-9]*">

<!-- Disable autocomplete -->
<input autocomplete="off">

<!-- Disable auto‑capitalization -->
<input autocapitalize="off">

12. Font Size Auto‑Adjustment

System font size changes affect layout.

// Prevent font size from changing with system settings
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Use media queries to adapt to different screens */
@media screen and (max-width: 320px) {
    html { font-size: 14px; }
}
@media screen and (min-width: 375px) {
    html { font-size: 16px; }
}
@media screen and (min-width: 414px) {
    html { font-size: 18px; }
}

Feel free to add more.