行動版網頁 Head 標籤通用寫法與 flexible.js 適配方案

一、通用 <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>網頁標題</title>
</head>

關鍵 meta 說明

二、flexible.js 彈性適配方案（淘寶出品）

原理： 動態改寫 <meta viewport>、給 <html> 設定 data-dpr 與 font-size，實現 1rem = 設計稿寬度/10 的換算。

使用步驟

1. 移除 HTML 中寫死的 viewport meta
2. 引入 flexible.js（約 4KB）
3. 設定設計稿基準：
   設計稿 640px → 1rem = 64px
   設計稿 750px → 1rem = 75px
4. CSS 撰寫時將 px 換算為 rem（例：320x240 banner → 5rem x 3.75rem @ 640 基準）

下載連結

flexible.js 下載

參考文章

flexible.js 詳細原理與實戰

三、實務建議

• 設計稿寬度統一規範（建議 750px，對應 iPhone 6/7/8 邏輯解析度 375pt × 2）
• 搭配 PostCSS postcss-pxtorem 自動轉換 px → rem
• 字體大小建議仍用 px 或媒體查詢，避免 rem 導致文字過大/過小
• 橫向滾動容器需額外處理 overflow-x:auto 避免版面崩壞