Mobile terminal adaptation strategy

The Necessity of Mobile Adaptation

The fragmentation of mobile device screen sizes is severe, ranging from 320px small-screen phones to 768px tablets. Developers need to ensure that websites display correctly on all devices. Traditional px units cannot meet this requirement, as fixed layouts on mobile devices can lead to content overflow or excessive whitespace.

Basic Viewport Settings

The viewport must be correctly set in the HTML document, which is the first step in mobile adaptation:

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

Key parameter explanations:

• width=device-width: Viewport width equals device width
• initial-scale=1.0: Initial zoom level is 1
• maximum-scale=1.0: Prevents users from zooming in
• user-scalable=no: Disables manual zooming by users

REM Adaptation in Vite

REM (Root EM) is calculated based on the root element's font size, combined with PostCSS plugins for automatic conversion:

1. Install necessary dependencies:

npm install postcss-pxtorem autoprefixer amfe-flexible -D

2. Configure vite.config.js:

import { defineConfig } from 'vite'
import autoprefixer from 'autoprefixer'
import pxtorem from 'postcss-pxtorem'

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        autoprefixer(),
        pxtorem({
          rootValue: 16,
          propList: ['*'],
          selectorBlackList: ['.norem']
        })
      ]
    }
  }
})

3. Import flexible in main.js:

import 'amfe-flexible'

Viewport Unit Solution

VW/VH units are directly relative to the viewport dimensions, where 1vw equals 1% of the viewport width:

.container {
  width: 100vw;
  padding: 5vw;
}

.title {
  font-size: 4vw;
  margin-bottom: 2vh;
}

Use PostCSS plugins for fallback solutions:

npm install postcss-viewport-units -D

Configuration example:

pxtorem({
  // ...other configurations
  mediaQuery: true,
  replace: true,
  viewportUnit: 'vw'
})

Media Query Strategy

Design responsive layouts for different breakpoints:

/* Small-screen phones */
@media (max-width: 375px) {
  .sidebar {
    display: none;
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

The 1px Border Issue on Mobile

On high-definition screens, 1px appears thicker. Solution:

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

Image Adaptation Solutions

Load different images based on DPI:

<picture>
  <source media="(min-resolution: 2dppx)" srcset="image@2x.jpg">
  <source media="(min-resolution: 3dppx)" srcset="image@3x.jpg">
  <img src="image.jpg" alt="Example image">
</picture>

Background image adaptation in CSS:

.logo {
  background-image: url('image.jpg');
  background-size: contain;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .logo {
    background-image: url('image@2x.jpg');
  }
}

Touch Event Optimization

Special handling for touch feedback on mobile:

document.querySelector('.btn').addEventListener('touchstart', function() {
  this.classList.add('active')
})

document.querySelector('.btn').addEventListener('touchend', function() {
  this.classList.remove('active')
})

CSS enhancements for touch experience:

.btn {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn:active {
  transform: scale(0.98);
}

Mobile Debugging Tips

Configure mobile debugging in Vite projects:

1. Modify vite.config.js:

server: {
  host: '0.0.0.0',
  port: 3000,
  strictPort: true
}

2. Use Eruda debugging tool:

npm install eruda -D

Load dynamically in development environment:

if (import.meta.env.DEV) {
  import('eruda').then(eruda => eruda.init())
}

Key Performance Optimization Points

Mobile network environments are complex and require special attention:

1. Code splitting:

// Dynamically import components
const Modal = () => import('./components/Modal.vue')

2. Lazy loading images:

<img v-lazy="imageUrl" alt="Description">

3. Inline critical CSS:

<style>
  /* Critical styles */
</style>

Common Mobile Issues and Solutions

1. Preventing iOS rubber band effect:

document.body.addEventListener('touchmove', function(e) {
  if (e.target.classList.contains('scroll-container')) {
    e.preventDefault()
  }
}, { passive: false })

2. Input field obscured by keyboard:

window.addEventListener('resize', () => {
  if (document.activeElement.tagName === 'INPUT') {
    document.activeElement.scrollIntoView({ block: 'center' })
  }
})

3. Solving fast-click delay:

npm install fastclick -D

Usage:

import FastClick from 'fastclick'
FastClick.attach(document.body)

Framework-Specific Adaptation Solutions

Best practices in Vue + Vite projects:

1. Responsive utility function:

import { ref, onMounted, onUnmounted } from 'vue'

export function useViewport() {
  const width = ref(window.innerWidth)
  
  const update = () => {
    width.value = window.innerWidth
  }
  
  onMounted(() => {
    window.addEventListener('resize', update)
  })
  
  onUnmounted(() => {
    window.removeEventListener('resize', update)
  })
  
  return { width }
}

2. Component-level media queries:

<template>
  <div :class="{ 'mobile-layout': isMobile }">
    <!-- Content -->
  </div>
</template>

<script setup>
import { useViewport } from './hooks/useViewport'

const { width } = useViewport()
const isMobile = computed(() => width.value < 768)
</script>

Modern CSS Solutions

Use clamp() for fluid typography:

.title {
  font-size: clamp(16px, 4vw, 24px);
}

.container {
  padding: clamp(10px, 5%, 20px);
}

CSS container query example:

.card-container {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 2fr;
  }
}

Mobile Navigation Patterns

Implementing mobile-specific navigation components:

<template>
  <div class="mobile-nav" :class="{ active: isOpen }">
    <button @click="toggleMenu">☰</button>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isOpen = ref(false)
const toggleMenu = () => {
  isOpen.value = !isOpen.value
}
</script>

<style>
.mobile-nav {
  position: fixed;
  top: 0;
  left: -100%;
  transition: left 0.3s;
}

.mobile-nav.active {
  left: 0;
}
</style>