Master Mobile Web Adaptation: Proven Frontend Techniques

Mobile adaptation has always been a key challenge in frontend development; here are common mobile compatibility solutions.

1. Use viewport configuration to ensure perfect viewport

Setting the correct viewport is the foundation of mobile development.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

Key attribute explanations:

width=device-width: set viewport width to device width

initial-scale=1.0: initial zoom level is 1

user-scalable=no: disable user scaling

viewport-fit=cover: adapt to notch screens

2. Use rem for flexible layout

rem is a unit relative to the root element (html) font size, enabling elastic scaling of the whole layout.

// Set rem base value
(function flexible() {
    const docEl = document.documentElement;
    function setRemUnit() {
        const rem = docEl.clientWidth / 10;
        docEl.style.fontSize = rem + 'px';
    }
    setRemUnit();
    window.addEventListener('resize', setRemUnit);
    window.addEventListener('orientationchange', setRemUnit);
})();

Corresponding CSS:

.container {
    width: 7.5rem;  /* 750px / 100 */
    height: 1rem;   /* 100px / 100 */
    font-size: 0.28rem; /* 28px / 100 */
}

3. CSS media queries for different sizes

Use media queries to tailor styles for various screen dimensions.

/* iPhone SE */
@media screen and (max-width: 374px) {
    .container { font-size: 14px; }
}

/* iPhone 6/7/8/X */
@media screen and (min-width: 375px) and (max-width: 413px) {
    .container { font-size: 16px; }
}

/* iPhone 6/7/8 Plus */
@media screen and (min-width: 414px) {
    .container { font-size: 18px; }
}

4. 1px border solution

Solution for overly thick 1 px borders on high‑density screens.

.border-1px {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #000;
        transform: scaleY(0.5);
        transform-origin: bottom;
    }
}

/* 2x screens */
@media (-webkit-min-device-pixel-ratio: 2) {
    .border-1px::after { transform: scaleY(0.5); }
}

/* 3x screens */
@media (-webkit-min-device-pixel-ratio: 3) {
    .border-1px::after { transform: scaleY(0.33); }
}

5. Safe area adaptation

Adaptation for devices with notches such as iPhone X.

/* Notch screen adaptation */
.safe-area-inset {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Fixed bottom navigation adaptation */
.fixed-bottom {
    position: fixed;
    bottom: 0;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
}

6. Image adaptation strategy

Image adaptation for devices with different resolutions.

<img src="image-800w.jpg" alt="Responsive image">

Corresponding CSS:

.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
}

7. Landscape adaptation handling

Layout adaptation for landscape orientation.

/* Detect landscape */
@media screen and (orientation: landscape) {
    .landscape-container { display: flex; flex-direction: row; }
}

/* Detect portrait */
@media screen and (orientation: portrait) {
    .portrait-container { display: flex; flex-direction: column; }
}

JavaScript to listen for screen rotation:

window.addEventListener('orientationchange', function() {
    if (window.orientation === 180 || window.orientation === 0) {
        // Portrait
        console.log('竖屏');
    }
    if (window.orientation === 90 || window.orientation === -90) {
        // Landscape
        console.log('横屏');
    }
});

8. Soft keyboard handling

Address page adaptation when the soft keyboard appears.

// Listen for soft keyboard
const originalHeight = document.documentElement.clientHeight;
window.addEventListener('resize', () => {
    const currentHeight = document.documentElement.clientHeight;
    const input = document.activeElement;
    if (originalHeight > currentHeight) {
        // Keyboard shown
        if (input.tagName === 'INPUT' || input.tagName === 'TEXTAREA') {
            input.scrollIntoView({ block: 'center' });
        }
    } else {
        // Keyboard hidden
        window.scrollTo(0, 0);
    }
});

CSS handling:

.container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

Mobile adaptation is a systematic engineering effort that should be planned at project start rather than addressed ad‑hoc when issues arise.

Feel free to leave comments and add suggestions.