手机web网页制作的认识（有关meta标签）
?近日以來一直在看JQuery Mobile?一個手機(jī)開發(fā)框架，說實話真的很頭疼的~~~~ 因為里面有很多的屬性、方法和事件~~~
下面是手機(jī)網(wǎng)頁的一些認(rèn)識：
??? 一、<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
??? 網(wǎng)頁手機(jī)wap2.0網(wǎng)頁的head里加入下面這條元標(biāo)簽，在iPhone的瀏覽器中頁面將以原始大小顯示，并不允許縮放。??
<meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?minimum-scale=1.0,?maximum-scale=1.0,?user-scalable=no">???
width?-?viewport的寬度?height?-?viewport的高度???
initial-scale?-?初始的縮放比例??
minimum-scale?-?允許用戶縮放到的最小比例???
maximum-scale?-?允許用戶縮放到的最大比例??
user-scalable?-?用戶是否可以手動縮放?
二、<meta name="format-detection" content="telephone=no">
當(dāng)該 HTML 頁面在手機(jī)上瀏覽時，該標(biāo)簽用于指定是否將網(wǎng)頁內(nèi)容中的手機(jī)號碼顯示為撥號的超鏈接。
在 iPhone 上默認(rèn)值是：
<meta name="format-detection" content="telephone=yes"/>
如果你不希望手機(jī)自動將網(wǎng)頁中的電話號碼顯示為撥號的超鏈接，那么可以這樣寫：
<meta name="format-detection" content="telephone=no"/>
三、<meta name="apple-mobile-web-app-capable"?content="yes"?/>
說明：網(wǎng)站開啟對web app程序的支持。
四、<meta name="apple-mobile-web-app-status-bar-style"?content="black"?/>
說明：
- 在web app應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色；?
- 默認(rèn)值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
注意：若值為“black-translucent”將會占據(jù)頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。
?！！！！蘋果web app其他設(shè)置：
當(dāng)然，配合web app的icon 和 啟動界面需要額外的兩端代碼進(jìn)行設(shè)定，如下所示：
<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />說明：這個link就是設(shè)置web app的放置主屏幕上icon文件路徑
使用：
- 該路徑需要注意的就是放到將網(wǎng)站的文檔根目錄下但不是服務(wù)器的文檔的根目錄。?
- 圖片尺寸可以設(shè)定為57*57（px）或者Retina可以定為114*114（px），ipad尺寸為72*72（px）
說明：這個link就是設(shè)置啟動時候的界面（圖片五），放置的路勁和上面類似。
使用：
- 該路徑需要注意的就是放到將網(wǎng)站的文檔根目錄下但不是服務(wù)器的文檔的根目錄。?
- 官方規(guī)定啟動界面的尺寸必須為 320*640（px），原本以為Retina屏幕可以支持雙倍，但是不支持，圖片顯示不出來。
五、<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后，全屏顯示?<meta name="apple-mobile-web-app-capable" content="yes" />
這meta的作用就是刪除默認(rèn)的蘋果工具欄和菜單欄。content有兩個值”yes”和”no”,當(dāng)我們需要顯示工具欄和菜單欄時，這個行meta就不用加了，默認(rèn)就是顯示。
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//將不識別郵箱
告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼?
iOS用rel="apple-touch-icon",android?用rel="apple-touch-icon-precomposed"。這樣就能在用戶把網(wǎng)頁存為書簽時，在手機(jī)HOME界面創(chuàng)建應(yīng)用程序樣式的圖標(biāo)。
?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
----------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<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 name="keywords" content="">
----------------------------------------------------------------------------------------------------------------------------
?
<meta?name="apple-mobile-web-app-capable"?content="yes">??
<meta?name="apple-mobile-web-app-status-bar-style"?content="black"?/>??
<meta?http-equiv="content-type"?content="text/html;?charset=gb2312">??
<meta?name="HandheldFriendly"?content="True">??
<meta?name="viewport"?content="width=device-width,?minimum-scale=1,?maximum-scale=1,?user-scalable=no">??
<meta?name="apple-touch-fullscreen"?content="YES"?/>??
<meta?name="viewport"?content="width=device-width,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"/>??
<meta?name="format-detection"?content="telephone=no"/>
轉(zhuǎn)載于:https://www.cnblogs.com/qiandanwu/p/5783835.html
總結(jié)
以上是生活随笔為你收集整理的手机web网页制作的认识（有关meta标签）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle【IT实验室】数据库备份与恢
- 下一篇： mac vagrant 虚拟机nfs挂载