移動終端H5頁面meta標籤的設定
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
解釋: 第一個meta標籤表示:強制讓文件的寬度與裝置的寬度保持1:1,並且文件最大的寬度比例是1.0,且不允許使用者點選螢幕放大瀏覽;
width - vi e w port的寬度 height - vi e wport的高度 initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例 maximum-scale - 允許使用者縮放到的最大比例
user- s c a l able - 使用者是否可以手動縮放 第二個meta標籤是i phone裝置中的safari私有meta標籤,它表示:允許全屏模式瀏覽;
第三個meta標籤也是 i phone的私有標籤,它指定的i phone中safari頂端的狀態條的樣式;
在web app應用下狀態條(螢幕頂部條)的顏色;
預設值為default(白色),可以定為black(黑色)和black-translucent(灰色半透明)。
注意:若值為“black-translucent”將會佔據頁面px位置,浮在頁面上方(會覆蓋頁面20px高度–iphone4和itouch4的Retina螢幕為40px)。
第四個meta標籤表示:告訴裝置忽略將頁面中的數字識別為電話號碼。
相關文章
- 移動端meta標籤設定總結
- <meta>標籤在移動端網頁開發的應用網頁
- meta標籤設定
- 移動端的頭部標籤和meta,[html5]移動端的頭部標籤和meta屬性詳解HTML
- 移動端H5頁面注意事項H5
- 移動端H5解惑-頁面適配(二)H5
- 移動端網站開發要點-meta設定網站
- 移動端的meta viewportView
- 前端meta標籤內容定義及使用說明,meta詳細說明,meta標籤使用前端
- (二)Chrome新標籤頁的設定Chrome
- 移動端與H5頁面畫素的差異與關係H5
- 移動端活動頁面搭建
- flexible.js-移動端H5頁面適配應用FlexJSH5
- HTML <meta>標籤HTML
- html meta標籤HTML
- 「移動端」Web頁面適配Web
- meta設定h5禁止縮放H5
- 移動端頁面滾動--解決方法
- meta標籤總結
- Html網頁中meta標籤及用法詳解HTML網頁
- 雙十一移動端頁面總結
- 利用whistle除錯移動端頁面除錯
- 移動端適配頁面快速搭建
- 淺談移動端開發頁面
- SAP WebClient UI頁面標籤的決定邏輯介紹WebclientUI
- Meta標籤實現阻止移動裝置(手機、Pad)的瀏覽器雙擊放大網頁瀏覽器網頁
- H5頁面在微信端的分享H5
- html5移動端頁面解析度設定及相應字型大小設定的靠譜使用方式HTML
- 移動端觸屏拖動頁面滾動效果
- 移動端H5混合開發設定覆盤與總結H5
- 移動端頁面寬度相容處理
- 移動端頁面功能之——長按事件事件
- HTML Meta標籤知多少HTML
- 移動端常鍵<meta>使用分享
- 42個移動端啟動頁面優化技巧優化
- 頁面動態加入<script>標籤並執行程式碼行程
- 火狐瀏覽器如何設定主頁為新標籤頁瀏覽器
- 關於移動端rem的設定REM