移動平臺的WebApp之Meta標籤

時間 2019-11-21

標籤移動平臺 webapp meta 標籤欄目無線简体版

原文原文鏈接

對於桌面平臺web佈局中你們對meta標籤再熟悉不過了，它永遠位於 head 元素內部，對作SEO的朋友必定對meta有種特殊的感情吧，今天咱們就來講說移動平臺的meta標籤，在移動平臺meta標籤究竟有哪些神奇的功效呢？css

一、Meta 之 viewporthtml

說到移動平臺meta標籤，那就不得不說一下viewport了，那麼什麼是viewport呢？ viewport便可視區域，對於桌面瀏覽器而言，viewport指的就是除去全部工具欄、狀態欄、滾動條等等以後用於看網頁的區域。對於傳統WEB頁面來講，980的寬度在iphone上顯示是很正常的，也是滿屏的，但對於webapp而言，可能就有點問題了，在iphone上咱們的webapp在豎屏下一般寬度都是320，這時咱們320頁面在iphone上顯示成啥效果呢？有人可能認爲iPhone不是320的寬度莫，感受應該是滿屏的吧，事實呢？咱們來看一下以下佈局在iPhone上的顯示狀況web

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Meta Viewport</title> <style type="text/css"> div,body{ padding:0; margin:0; } body{ padding-top:100px; color:#fff; } div{ width:320px; height:100px; margin:0 auto; background:#000; text-align:center; font:30px/100px Arial; } </style> </head> <body> <div> AppUE </div> </body> </html>瀏覽器

在iPhone上顯示如圖： app

所以咱們必須改變viewport，咱們就有以下幾種屬性值能夠設置：webapp

width: viewport 的寬度（範圍從 200 到 10,000 ，默認爲 980 像素） height: viewport 的高度（範圍從 223 到 10,000 ） initial-scale: 初始的縮放比例（範圍從>0到 10 ） minimum-scale: 容許用戶縮放到的最小比例 maximum-scale: 容許用戶縮放到的最大比例 user-scalable: 用戶是否能夠手動縮放iphone

對於這些屬性，咱們能夠設置其中的一個或者多個，並不須要你同時都設置，iPhone 會根據你設置的屬性自動推算其餘屬性值，而非直接採用默認值。工具

若是你把initial-scale=1 ，那麼 width 和 height在豎屏時自動爲320*356 （不是320*480 由於地址欄等都佔據空間），橫屏時自動爲 480*208。相似地，若是你僅僅設置了 width ，就會自動推算出initial-scale 以及height。例如你設置了 width=320 ，豎屏時 initial-scale 就是 1 ，橫屏時則變成 1.5 了。那麼到底這些設置如何讓 Safari 知道？其實很簡單，就一個 meta ，形如：佈局

好了，咱們就能夠按全屏來佈局咱們的頁面了，不用再擔憂頁面顯示的很小了！

二、Meta 之 format-detection

你明明寫的一串數字沒加連接樣式，而iPhone會自動把你這個文字加連接樣式、而且點擊這個數字還會自動撥號！想去掉這個撥號連接該如何操做呢？這時咱們的meta又該大顯神通了，代碼以下：

telephone=no就禁止了把數字轉化爲撥號連接！ telephone=yes就開啓了把數字轉化爲撥號連接，要開啓轉化功能，這個meta就不用寫了,在默認是狀況下就是開啓！

三、Meta 之 apple-mobile-web-app-capable

這meta的做用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值」yes」和」no」,當咱們須要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。

加了該meta的狀況

四、Meta 之 apple-mobile-web-app-status-bar-style

status-bar-style:black-translucent

摘自：http://hi.baidu.com/rosaz/item/9ff022cde1305d1dc710b2d1

相關標籤/搜索