html5——meta標籤
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> html
width: viewport 的寬度 （範圍從 200 到 10,000 ，默認爲 980 像素 ）web
height: viewport 的高度 （範圍從 223 到 10,000 ）windows
initial-scale: 初始的縮放比例 （範圍從>0到 10 ）瀏覽器
minimum-scale: 容許用戶縮放到的最小比例app
maximum-scale: 容許用戶縮放到的最大比例iphone
user-scalable: 用戶是否能夠手動縮放工具
<meta name="apple-mobile-web-app-capable" content="yes" />是否刪除默認的蘋果工具欄和菜單欄優化
<meta name="apple-mobile-web-app-status-bar-style" content="black" />當設置了app形式以後，做用是控制狀態欄顯示樣式動畫
<meta name="format-detection"content="telephone=no, email=no" />iphone會把一串數字識別爲電話號碼，點擊的時候會提示是否呼叫，屏蔽這功能則把telephone設置爲no，要啓用電話功能，請使用<a href="tel:13888888888">Call Me : 13888888888</a>來代替，郵件則爲<a href="mailto:someone@microsoft.com?subject=Hello%20again">發送郵件</a>網站
其餘的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">
此外，apple還有兩個有趣的標籤：
1. apple-touch-icon
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
若是apple-mobile-web-app-capable設置爲yes了，那麼在蘋果機的safari上能夠經過添加到主屏按鈕將網站添加到主屏幕上。而設置相應apple-touch-icon標籤，則添加到主屏上的圖標就會使用咱們指定的圖片。
2. apple-touch-startup-image
<linkrel="apple-touch-startup-image"href="/startup.png">
基於apple-mobile-web-app-capable設置爲yes，能夠爲WebApp設置一個相似NativeApp的啓動畫面。和apple-touch-icon不一樣，apple-mobile-web-app-capable不支持sizes屬性，要使用media來加載不一樣的啓動畫面。詳細查詢大漠的文章。
// 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" />
因此，對於移動端，把通用的起始模板寫成sublime的snippet：
<snippet>
<content>
<![CDATA[<!DOCTYPE html>
<html lang="en">
<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>標題</title>
</head>
<body> 主體
</body>
</html>
</content>
<tabTrigger>mhd</tabTrigger>
<description>Mobile Frame</description> <scope>text.html</scope>
</snippet>
- 1. Html5 meta 標籤詳解
- 2. 移動端頭部標籤(HTML5 Head Meta)
- 3. 移動端頭部標籤(HTML5 head meta)
- 4. HTML5中Head內標籤詳解(一)：meta標籤
- 5. meta標籤
- 6. html meta標籤
- 7. Html meta 標籤
- 8. html meta 標籤
- 9. meta 詳解，html5 meta 標籤平常設置
- 10. meta 詳解，html5 meta 標籤平常設置（轉）
- 更多相關文章...
- • MyBatis if標籤 - MyBatis教程
- • MyBatis foreach標籤 - MyBatis教程
- • Docker 清理命令
- • Github 簡明教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。