手機(jī)端網(wǎng)頁的頭部meta標(biāo)簽里面都應(yīng)該配置些啥?
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
網(wǎng)頁中常陈看見有這樣的標(biāo)記捌蚊,他們是清瀏覽器緩存用的,記錄下來近弟,方便以后查詢缅糟,以免忘記
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
PS:清除瀏覽器中的緩存,它和其它幾句合起來用祷愉,就可以使你再次進(jìn)入曾經(jīng)訪問過的頁面時窗宦,ie瀏覽器必須從服務(wù)端下載最新的內(nèi)容,達(dá)到刷新的效果二鳄。
禁止緩存
<meta http-equiv="Expires" content="-1">
下面3個清除緩存
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
讓網(wǎng)頁的寬度自動適應(yīng)手機(jī)屏幕的寬度:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
第一行:
width=device-width :表示寬度是設(shè)備屏幕的寬度
initial-scale=1.0:表示初始的縮放比例
minimum-scale=0.5:表示最小的縮放比例
maximum-scale=2.0:表示最大的縮放比例
user-scalable=yes:表示用戶是否可以調(diào)整縮放比例
第二行:
設(shè)定iphone端頁面全屏赴涵。
第三行:
取消數(shù)字被識別為電話號碼。
header和footer 可以看成是DIV正常用css操作就行了
<pre class="相關(guān)demo" name="code" style="margin: 0px; padding: 0px;">一订讼、天貓
<title>天貓觸屏版</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<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">
二髓窜、淘寶
<title>淘寶網(wǎng)觸屏版</title>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<meta name="author" content="m.taobao.com">
<meta name="copyright" content="Copyright ?m.taobao.com 版權(quán)所有">
<meta name="revisit-after" content="1 days">
<meta name="keywords" content="">
<meta name="description" content="">
三、京東
<title> 京東 - 手機(jī)版 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="Keywords" content="手機(jī)購物,WAP商城,日用百貨,3C家電,汽車用品">
<meta name="description"
content="京東手機(jī)版提供了包括數(shù)碼欺殿、家電纱烘、手機(jī)杨拐、電腦配件、網(wǎng)絡(luò)產(chǎn)品擂啥、
日用百貨等數(shù)萬種商品哄陶,手機(jī)快捷購物,就上京東手機(jī)版哺壶。">
四屋吨、網(wǎng)易
<title>手機(jī)網(wǎng)易網(wǎng)</title>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">
五、百度
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
meta指元素可提供有關(guān)頁面的元信息(meta-information)山宾,比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞至扰。 標(biāo)簽位于文檔的頭部,不包含任何內(nèi)容资锰。 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對敢课。
手機(jī)端特有的有哪些?
<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標(biāo)簽表示:強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1绷杜,并且文檔最大的寬度比例是1.0直秆,且不允許用戶點(diǎn)擊屏幕放大瀏覽;
width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
第二個meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽鞭盟,它表示:允許全屏模式瀏覽圾结;
第三個meta標(biāo)簽也是iphone的私有標(biāo)簽,它指定的iphone中safari頂端的狀態(tài)條的樣式齿诉;
在web app應(yīng)用下狀態(tài)條(屏幕頂部條)的顏色筝野;
默認(rèn)值為default(白色),可以定為black(黑色)和black-translucent(灰色半透明)粤剧。
注意:若值為“black-translucent”將會占據(jù)頁面px位置歇竟,浮在頁面上方
(會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px)。
第四個meta標(biāo)簽表示:告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼抵恋。</pre>