html5手机网站需要加的那些meta标签,手机网站自适应
生活随笔
收集整理的這篇文章主要介紹了
html5手机网站需要加的那些meta标签,手机网站自适应
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、移動網站要加的html5相關meta和標簽
? ? a、<!-- 強制讓文檔與設備的寬度保持1:1 -->
? ? <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
? ? 網頁寬度默認等于屏幕寬度(width=device-width),
? ? 初始縮放比例(initial-scale=1)為1.0,即網頁初始大小占屏幕面積的100%。
? ? b、<!-- 刪除默認的蘋果工具欄和菜單欄 -->
? ? <meta name="apple-mobile-web-app-capable" content="yes">
? ? c、<!-- 在web app應用下狀態條(屏幕頂部條)的顏色 -->
? ? <meta name="apple-mobile-web-app-status-bar-style" content="black" />
? ? d、<!-- 禁止了把數字轉化為撥號鏈接 -->
? ? <meta name="format-detection" content="telephone=no">
? ? e、<!-- 瀏覽網站時的小圖標 -->
? ? <link rel="shortcut icon" href="http://p.www.xiaomi.com/favicon.ico" type="/image/x-icon"> ?
? ? f、<!-- 添加至主屏時的圖片 -->
? ? <link rel="apple-touch-icon-precomposed" href="http://a.tbcdn.cn/mw/s/hi/tbtouch/images/touch-icon.png">
? ? ==================
? ? 還有一種有趣的方法
? ? 創建html5時發現這么一句話,如下:
? ? <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
? ? a、<!-- 強制讓文檔與設備的寬度保持1:1 -->
? ? <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
? ? 網頁寬度默認等于屏幕寬度(width=device-width),
? ? 初始縮放比例(initial-scale=1)為1.0,即網頁初始大小占屏幕面積的100%。
? ? b、<!-- 刪除默認的蘋果工具欄和菜單欄 -->
? ? <meta name="apple-mobile-web-app-capable" content="yes">
? ? c、<!-- 在web app應用下狀態條(屏幕頂部條)的顏色 -->
? ? <meta name="apple-mobile-web-app-status-bar-style" content="black" />
? ? d、<!-- 禁止了把數字轉化為撥號鏈接 -->
? ? <meta name="format-detection" content="telephone=no">
? ? e、<!-- 瀏覽網站時的小圖標 -->
? ? <link rel="shortcut icon" href="http://p.www.xiaomi.com/favicon.ico" type="/image/x-icon"> ?
? ? f、<!-- 添加至主屏時的圖片 -->
? ? <link rel="apple-touch-icon-precomposed" href="http://a.tbcdn.cn/mw/s/hi/tbtouch/images/touch-icon.png">
? ? ==================
? ? 還有一種有趣的方法
? ? 創建html5時發現這么一句話,如下:
? ? <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
? ? 這樣寫可以達到的效果是如果安裝了GCF(Google Chrome Frame 谷歌內嵌瀏覽器框架的簡稱),則使用GCF來渲染頁面,如果沒安裝GCF,則使用最高版本的IE內核進行渲染。這個插件可以讓用戶的IE瀏覽器外不變,但用戶在瀏覽網頁時,實際上使用的是Google Chrome瀏覽器內核,而且支持IE6、7、8等多個版本的IE瀏覽器。
總結
以上是生活随笔為你收集整理的html5手机网站需要加的那些meta标签,手机网站自适应的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 传感器与自动变速器
- 下一篇: linux基础知识复习学习笔记