wap端開發必須基礎

0.

怎麼去寫一份比較好的做品展現。

多看國外的網址而後本身模仿。

（1) 作後端系統的各類界面。移動端包含各類頁面。（2）各類表單。包含各類下路框，單選按鈕，多選按鈕，各類加載插件，各類日曆插件。

（3) 你作過的各類精緻的效果。

  (4) 你作的一個比較好的我的css3簡歷記得那個特別好的效果麼。

（5) 開源項目，我的博客地址等等。

（6）各類敏捷開發的方法等等。

0.一些須要看的博客 ：http://blog.csdn.net/binyao02123202/article/details/51629305

http://sc.chinaz.com/info/130410113358.htm

http://www.cnblogs.com/xsilence/p/5774737.html

http://www.uisdc.com/mobile-design-process

1.

initial-scale=1.0 確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。

在移動設備瀏覽器上，經過爲 viewport meta 標籤添加 user-scalable=no 能夠禁用其縮放（zooming）功能。

2. 必要的meta.

<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

關於X-UA-Compatible

這是一個，文檔兼容模式的定義。
Edge 模式告訴 IE 以最高級模式渲染文檔，也就是任何 IE 版本都以當前版本所支持的最高級標準模式渲染，避免版本升級形成的影響。簡單的說，就是什麼版本 IE 就用什麼版本的標準模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">

使用如下代碼強制 IE 使用 Chrome Frame 渲染
<meta http-equiv="X-UA-Compatible" content="chrome=1">

提示 IE 用戶安裝 Google Frame
Google 官方提供了對 Google Frame 插件安裝狀況的檢測，這裏直接調用方法便可，若是檢測到 IE 並未安裝 Google Frame，則彈出對話框提示安裝。
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>

最佳的兼容模式方案，結合考慮以上兩種：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta http-equiv="Cache-Control" content="no-transform"/>這個是百度官方給的禁止轉碼聲明。在網頁中添加了這一條，百度就不會移動搜索中將網站轉碼，並呈現給移動端用戶。

<meta http-equiv="Cache-Control"content="max-age=0"/>  頁面緩存時間的最大值是0秒，目的是不讓頁面緩存，每次訪問必須到服務器讀取

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=2.0, user-scalable=1"> -->
<meta name="apple-mobile-web-app-capable" content="yes">

默認瀏覽器全屏

使用
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="default">
後safari保存到主屏幕後,網頁打開能全屏了,可是,按下Hone鍵回到主頁面,而後再點擊圖標,上次的Cookie和localStorage所有被自動清空了,怎麼設置才能使其不清空!!!!!!
或者有什麼其餘的存儲本地html數據方法收起

若是safari不開啓全屏模式,也就是<meta name="apple-mobile-web-app-capable" content="yes"/>這句代碼不加在html裏面,那麼經過safari瀏覽該html的時候保存的Cookie等其餘數據不會被清空

可是開啓了全屏模式,而且將此快捷鍵保存到手機桌面上,經過桌面上的圖標打開該網站後,而後按下hone鍵回到桌面,再經過桌面上的圖標打開該網站,發現數據全被清空了.也就是好像safari全屏模式下瀏覽網頁,按下hone鍵就會清空數據同樣?

 

<meta name="layoutmode" content="standard">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 做用是控制狀態欄顯示樣式
<meta name="renderer" content="webkit">

<!--uc瀏覽器判斷到頁面上文字居多時，會自動放大字體優化移動用戶體驗。添加如下頭部能夠禁用掉該優化-->
<meta name="wap-font-scale" content="no">

<meta content="telephone=no" name="format-detection" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

通常狀況系能夠考慮用到的代碼：

<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-transform"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=2.0, user-scalable=1"> -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="layoutmode" content="standard">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="renderer" content="webkit">

3. css之px自動轉rem—sublime 插件CSSREM  http://www.cnblogs.com/olivianate/p/5328716.html 

4. 能夠考慮引入這個css https://github.com/lzxb/flex.css

5.也是一種移動端比較流行的佈局方式，我體驗了一下，不太好用哈

var iScale = 1;

iScale = iScale/window.devicePixelRatio;

document.write();//這裏邊寫iScale的的meta

var iWidth = document.documentElement.clientWidth/16;

document.getElementByTagName('html')[0].style.fontSize = iWidth + 'px';