JavaScript HTML5 手機網站 準系統

標籤：

讓網頁的寬度自適應螢幕<meta name="viewport" content="width=device-width"/>  
 1）html上加入<meta name="viewport" content=" initial-scale=1.0,user-scalable=no" />
發確保網頁的效果
 2）加上以下語句可使網頁在蘋果裝置上運行更好
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
 3）加入這句話可以定義iphone的添加到主畫面的表徵圖
<link rel="apple-touch-icon" href="/images/logo.png" />

 

autocomplete="off"//去掉輸入框的記錄

querySelector只返回匹配的第一個元素，如果沒有匹配項，返回null。
querySelectorAll返回匹配的元素集合，如果沒有匹配項，返回空的nodelist(節點數組)。

 

<!------IE8以及以下不支援HTML5的解決辦法------>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width,  initial-scale=1.0, user-scalable=0, minimum-scale=1.0,  maximum-scale=1.0" />// 控制手機全屏 ： 強制讓文檔的寬度與裝置的寬度保持1:1， 並且文檔最大的寬度比例  是1.0，且不允許使用者點擊螢幕放大瀏覽
//viewport:可視地區
//initial-scale:初始的縮放比例;user-scalable:使用者是否可以手動縮放;
//minimum-scale:允許使用者縮放的最小比例;maximum-scale :允許使用者縮放的最大比例

<meta name="format-detection" content="telephone=no"/>//在手機中不會將網頁中的一串數字(電話號碼)顯示為撥號的超連結,預設telephone=yes 

<meta name=”apple-mobile-web-app-capable” content=”yes” />//刪除黙認的蘋果功能表列和工具列,如需要蘋果功能表列和工具列可不加

<meta name=”apple-mobile-web-app-status-bar-style”  content=”default”  />//控制狀態列樣式content有三個值：default、black、black-translucent

<link rel="apple-touch-icon" href="res/images/icon.png" />//對移動網站-mobile web進行收藏（“添加到案頭表徵圖”）的時候增加的表徵圖定義屬性
//apple-touch-icon:增加高光光亮的表徵圖
//apple-touch-icon-precomposed:設計原圖表徵圖

網頁針對不同螢幕解析度修改，用-webkit-device-pixel-ratio這個media標籤或在js中用  window.devicePixelRatio這個方法，設定target-densitydpi標籤和device-dpi屬性。這讓你的定製更具有 靈活性。

 

JavaScript HTML5 手機網站 準系統