移動端Web系列4 -- meta

時間 2019-11-09

標籤移動 web 系列 meta 欄目無線简体版

原文原文鏈接

分類

在介紹移動端特有 meta 標籤以前，先簡單說一下 HTML meta 標籤的一些知識。
meta 標籤包含了 HTTP 標題信息(http-equiv) 和頁面描述信息(name)。html

http-equiv:
該枚舉的屬性定義，能夠改變服務器和用戶代理行爲的編譯。編譯的值取content 裏的內容。簡單來講便可以模擬 HTTP 協議響應頭。
最多見的大概屬於Content-Type了，設置編碼類型。如ios
```
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
```
H5中能夠簡化爲web
```
<meta charset="utf-8">
```
http-equiv常見還有其它以下等（合理使用可增長 SEO 收錄）。segmentfault
- Content-Language : 設置網頁語言
- Refresh : 指定時間刷新頁面
- set-cookie : 設定頁面 cookie 過時時間
- last-modified : 頁面最後生成時間
- expires : 設置 cache 過時時間
- cache-control : 設置文檔的緩存機制
- ...
name:
該屬性定義了文檔級元數據的名稱。用於對應網頁內容，便於搜索引擎查找分類，如 keywords, description; 也可使用瀏覽器廠商自定義的 meta，如 viewport；windows

移動端特有屬性

viewport

可視區域的定義，如屏幕縮放等。告訴瀏覽器如何規範的渲染網頁。瀏覽器

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

上一章節中已經詳細講解過了，這邊就再也不重複了。緩存

format-detection

對電話號碼的識別服務器

<meta name="format-detection" content="telephone=no" />

IOS私有屬性

apple-mobile-web-app-capable

啓用 webapp 模式, 會隱藏工具欄和菜單欄，和其它配合使用。cookie

<meta name="apple-mobile-web-app-capable" content="yes" />

apple-mobile-web-app-status-bar-style

在webapp模式下，改變頂部狀態條的顏色。app

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

default(白色，默認) | black(黑色) | black-translucent(半透明)

注意：若值爲「black-translucent」將會佔據頁面位置，浮在頁面上方（會覆蓋頁面 20px 高度， Retina 屏幕爲 40px ）。

webapp對應的Link標籤

apple-touch-icon

在webapp下，指定放置主屏幕上 icon 文件路徑;

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

默認 iphone 大小爲 60px, ipad 爲 76px, retina 屏乘2；
如沒有一致尺寸的圖標，會優先選擇比推薦尺寸大，可是最接近推薦尺寸的圖標。
ios7之前系統默認會對圖標添加特效（圓角及高光），若是不但願系統添加特效，則能夠用apple-touch-icon-precomposed.png代替apple-touch-icon.png

apple-touch-startup-image

在 webapp 下，設置啓動時候的界面;

<link rel="apple-touch-startup-image" href="/startup.png" />

不支持 size 屬性，可使用 media query 來控制。iphone 和 touch 上，圖片大小必須是 230*480 px,只支持豎屏;

其它meta

<!-- 啓用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">

參見w3cplus

末尾總結

因此，通常新建頁面的時候，能夠採用以下結構，再依據本身的實際須要添加所需便可。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection"content="telephone=no" />
    <title>Demo</title>
</head>
<body>
    <!-- code here -->
</body>
</html>

文獻參考

相關標籤/搜索

移動端 Web

移動端debug-4