移動端-新建空白頁面meta各個標籤詳細解讀

時間 2019-12-08

標籤移動新建空白頁面 meta 各個標籤詳細解讀欄目無線简体版

原文原文鏈接

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>

meta標籤

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" />

viewport

視圖窗口，移動端特屬的標籤。通常使用下面這段代碼便可：html

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

上面的代碼依次表示設置寬度爲設備的寬度，默認不縮放，不容許用戶縮放（即禁止縮放），在網頁加載時隱藏地址欄與導航欄（ios7.1新增）。前端

width – // [pixel_value | device-width] viewport 的寬度，範圍從 200 到 10,000，默認爲 980 像素 height – // [pixel_value | device-height ] viewport 的高度，範圍從 223 到 10,000 initial-scale – // float_value，初始的縮放比例 （範圍從 > 0 到 10） minimum-scale – // float_value，容許用戶縮放到的最小比例 maximum-scale – // float_value，容許用戶縮放到的最大比例 user-scalable – // [yes | no] 用戶是否能夠手動縮放 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目標屏幕像素密度

注：target-densitydpi屏幕像素密度和縮放有關，你能夠試試修改這個demo，用手機看下實際效果。我通常不設置這個屬性。ios

apple-mobile-web-app-capable

是否啓動webapp功能，會刪除默認的蘋果工具欄和菜單欄。web

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

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

當啓動webapp功能時，顯示手機信號、時間、電池的頂部導航欄的顏色。默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）。這個主要是根據實際的頁面設計的主體色爲搭配來進行設置。windows

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

注：若是對apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style不太理解，可查閱下面的參考資料第三篇文章，裏面有截圖說明。瀏覽器

telephone & email

忽略頁面中的數字識別爲電話號碼app

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

一樣還有一個email識別webapp

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

固然二者能夠寫在一塊兒iphone

<meta name="format-detection" content="telphone=no, email=no" />

其餘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">

參考資料：工具

link標籤

apple-touch-icon

若是apple-mobile-web-app-capable設置爲yes了，那麼在iPhone,iPad,iTouch的safari上可使用添加到主屏按鈕將網站添加到主屏幕上。而經過設置相應apple-touch-icon標籤，則添加到主屏上的圖標就會使用咱們指定的圖片。

如下是針對ox不一樣設備，選擇一個最優icon。默認iphone的大小爲60px，ipad爲76px，retina屏乘以2倍。

<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">

ios7之前系統默認會對圖標添加特效（圓角及高光），若是不但願系統添加特效，則能夠用apple-touch-icon-precomposed.png代替apple-touch-icon.png

圖標使用的優先級以下：

若是沒有跟相應設備推薦尺寸一致的圖標，那個會優先使用比推薦尺寸大，但最接近推薦尺寸的圖標。
若是沒有比推薦尺寸大的圖標，會優先選擇最接近推薦尺寸的圖標。
如些有多個圖標符合推薦尺寸，會優先選擇包含關鍵字precomposed的圖標。

若是未在區域指定用link標籤指定圖標，會自動搜索網站根目錄下以apple-touch-icon爲前綴的png圖標。

注：ios7再也不爲icon添加特效，ios7之前則默認爲icon添加特效，除非icon有關鍵字-precomposed.png爲後綴。

參考資料：

apple-touch-startup-image

一樣基於apple-mobile-web-app-capable設置爲yes，能夠用WebApp設置一個相似NativeApp的啓動畫面。

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

和apple-touch-icon不一樣，apple-mobile-web-app-capable不支持sizes屬性，因此使用media來控制retina和橫豎屏加載不一樣的啓動畫面。

// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /> // iPhone Retina <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> // iPhone 5 <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png"> // iPad portrait <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" /> // iPad landscape <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" /> // iPad Retina portrait <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> // iPad Retina landscape <link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

參考資料：

總結

空白頁面模板，而後再根據具體狀況在此基礎上添加apple-touch-icon和apple-touch-startup-image

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <title>Document</title> </head> <body> </body> </html>

相關標籤/搜索

詳詳細細