移動端 Web 頭部通用模板：Viewport、Meta 標籤與 Flexible.js 適配方案

移動端 Web 頭部通用模板：Viewport、Meta 標籤與 Flexible.js 適配方案

移動端頁面頭部的 Meta 標籤配置直接影響頁面在各類設備上的渲染表現。本文整理了一套生產可用的通用模板，並詳細講解淘寶 Flexible.js 的動態 Rem 適配原理與用法。

一、通用 Head 模板

<head lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-title" content="">
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  <meta name="format-detection" content="telephone=no, email=no"/>
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <title>Web前端</title>
</head>

關鍵標籤解析

• viewport：核心適配開關，禁用縮放、寬度跟隨設備。
• apple-mobile-web-app-capable：啟用 Web App 全屏模式（iOS Safari）。
• apple-mobile-web-app-status-bar-style：設置狀態欄樣式（black/black-translucent/default）。
• format-detection：禁用電話/郵箱自動識別為可點擊鏈接。
• 緩存控制三件套：防止頁面被緩存導致更新不生效。

二、Flexible.js 動態 Rem 適配方案

核心作用（僅 4KB）：

1. 動態重寫 <meta name="viewport"> 標籤
2. 給 <html> 添加 data-dpr 屬性並動態更新（設備像素比）
3. 給 <html> 設置 font-size 並動態更新（Rem 基準值）

使用步驟

1. 引入 flexible.js（引入後請刪除手寫的 viewport 標籤，由 JS 動態生成）
2. 根據設計稿寬度確定 Rem 基準：
   設計稿 640px → 1rem = 64px（html font-size: 64px）
   設計稿 750px → 1rem = 75px（html font-size: 75px）
3. CSS 中將像素值轉為 Rem：
   320×240 的 Banner（640 稿） → 5rem × 3.75rem

下載與參考

• Flexible.js 下載：官方鏈接
• 參考博文：詳細講解

總結

Meta 標籤解決「怎麼顯示」，Flexible.js 解決「怎麼適配」。兩者結合可覆蓋 99% 移動端適配場景，建議作為項目脚手架標配。