手机wap网页制作的认识（有关meta…
近日以來一直在看JQuery Mobile?一個手機開發框架，說實話真的很頭疼的~~~~ 因為里面有很多的屬性、方法和事件~~~
下面是手機網頁的一些認識：
??? 一、<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
??? 網頁手機wap2.0網頁的head里加入下面這條元標簽，在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">
當該 HTML 頁面在手機上瀏覽時，該標簽用于指定是否將網頁內容中的手機號碼顯示為撥號的超鏈接。
在 iPhone 上默認值是：
<meta name="format-detection" content="telephone=yes"/>
如果你不希望手機自動將網頁中的電話號碼顯示為撥號的超鏈接，那么可以這樣寫：
<meta name="format-detection" content="telephone=no"/>
三、<meta name="apple-mobile-web-app-capable"?content="yes"?/>
說明：網站開啟對web app程序的支持。
四、<meta name="apple-mobile-web-app-status-bar-style"?content="black"?/>
說明：
- 在web app應用下狀態條（屏幕頂部條）的顏色；
- 默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
注意：若值為“black-translucent”將會占據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。
?！！！！蘋果web app其他設置：
當然，配合web app的icon 和 啟動界面需要額外的兩端代碼進行設定，如下所示：
<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />說明：這個link就是設置web app的放置主屏幕上icon文件路徑
使用：
- 該路徑需要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
- 圖片尺寸可以設定為57*57（px）或者Retina可以定為114*114（px），ipad尺寸為72*72（px）
說明：這個link就是設置啟動時候的界面（圖片五），放置的路勁和上面類似。
使用：
- 該路徑需要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
- 官方規定啟動界面的尺寸必須為 320*640（px），原本以為Retina屏幕可以支持雙倍，但是不支持，圖片顯示不出來。
五、<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后，全屏顯示?<meta name="apple-mobile-web-app-capable" content="yes" />
這meta的作用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值”yes”和”no”,當我們需要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//將不識別郵箱
告訴設備忽略將頁面中的數字識別為電話號碼?
iOS用rel="apple-touch-icon",android?用rel="apple-touch-icon-precomposed"。這樣就能在用戶把網頁存為書簽時，在手機HOME界面創建應用程序樣式的圖標。
?
<!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"/>
總結
以上是生活随笔為你收集整理的手机wap网页制作的认识（有关meta…的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： virtualbox折腾记
- 下一篇： 魔兽世界服务器卡顿原理,魔兽世界9.0卡