HTML5開發手機項目-我的總結（轉）

時間 2019-11-17

標籤 html5 html 開發手機項目我的總結欄目 HTML5 简体版

原文原文鏈接

讓網頁的寬度自適應屏幕<meta name="viewport" content="width=device-width"/>
1）html上加入<meta name="viewport" content=" initial-scale=1.0,user-scalable=no" />
發確保網頁的效果
2）加上如下語句可以使網頁在蘋果設備上運行更好javascript

網頁打開方式：<a href="#" target="_blank">連接</a>
target的值：_self(相同學口，瀏覽器默認)、_top(整頁窗口)和_parent(父窗口)相同、_blank(在新建的窗口打開)
<head><base target="_blank" ></head>表示頁面中的全部連接都在新窗口打開css

<a href="" rel="external">madinc.co</a>//html

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

querySelector只返回匹配的第一個元素，若是沒有匹配項，返回null。
querySelectorAll返回匹配的元素集合，若是沒有匹配項，返回空的nodelist(節點數組)。
document.querySelector('#indicator > li.active').className = '';//......java

innerheight: 返回窗口的文檔顯示區的高度。 (IE用document.documentElement.clientHeight)
innerwidth 返回窗口的文檔顯示區的寬度。(IE用document.documentElement.clientWidth )node

<-----------------------------------------------------------------HTML5---------------->
<html manifest="manifest.cache">
HTML5新增:
contenteditable:設置是否容許用戶編輯元素
contentextmenu:給元素設置一個上下文菜單
draggable:設置是否容許用戶拖動元素
irrelevant:設置元素是否相關。不顯示非相關的元素。
ref:引用另外一個文檔或本文檔上另外一個位置。僅在template屬性設置時使用
registrationmark:爲元素設置拍照。可規定於任何<rule>元素的後代，除了<nest>元素jquery

android

網頁針對不一樣屏幕分辨率修改，用 padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; line-height: 21px;">
移動網站的視圖的標籤
<div data-role="page" id="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>

HTML5的data-前綴就被稱爲data屬性

本地存儲:
sessionStorage.lastname="Smith";//針對session的存儲
localStorage.lastname="Smith";//沒有時間限制的本地存儲(IE8也支持)
document.write(localStorage.lastname);
使用本地存儲前應先肯定window.localStorage是否存在

<input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" />//placeholder:默認提示,required:定義輸入的字段是否必須(提交時的非空驗證)

HTML5 提供了兩種檢測是否在線的方式：navigator.online（true/false）和 online/offline事件。
navigator.standalone爲true:從桌面啓動
navigator.standalone爲false:從ios瀏覽器啓動

localStorage. length:返回如今已經存儲的變量數目。
localStorage. key(n):返回第n個變量的鍵值(key)。
localStorage.getItem(k):和localStorage.k同樣，取得鍵值爲k的變量的值。
localStorage.setItem(k , v):和localStorage.k = v同樣，設置鍵值k的變量值。
localStorage.removeItem(k):刪除鍵值爲k的變量。
localStorage.clear():清空全部變量。

window.applicationCache對象的事件:
checking: 用戶代理檢查更新或者在第一次嘗試下載manifest文件的時候，本事件每每是事件隊列中第一個被觸發的

noupdate: 檢測出manifest文件沒有更新

downloading: 用戶代理髮現更新而且正在取資源，或者第一次下載manifest文件列表中列舉的資源

progress: 用戶代理正在下載資源manifest文件中的須要緩存的資源

cached: manifest中列舉的資源已經下載完成，而且已經緩存

updateready: manifest中列舉的文件已經從新下載並更新成功，接下來js可使用swapCache()方法更新到應用程序中

obsolete: 一、manifest的請求出現404或者410錯誤，應用程序緩存被取消二、manifest的請求出現404或者410錯誤，更新緩存的請求失敗三、manifest文件沒有改變，可是頁面引用的manifest 文件沒有被正確地下載

error: 一、在取manifest列舉的資源的過程當中發生致命的錯誤二、在更新過程當中manifest文件發生變化

<---------------------------------------------------------------CSS---------------->
-moz-border-radius: 6px; 6px; border-radius: 6px;//圓角
text-shadow: 2px 2px 5px #333;//添加陰影
none;//不可先擇文字(webkit內核的瀏覽器)
//蘋果移動設備上會識別，用於保證文字大小
變形(transformation)、轉換(transition)和動畫(animation)

圖片旋轉的一個樣式：
transition_duration{

//發生變化的屬性
//發生變化的時間
//定義動畫變化的曲線
}
transition_duration:hover{

}

transform:旋轉、扭曲、縮放、移動、矩陣變形 {transform-origin:元素的基點，默認在元素中心}
transform: rotate(30deg) | scale(2,1.5)(水平,垂直) | skew(30deg,10deg) | translate(100px,20px) |matrix;

<------------------------------------------------------------ajax------------------>
isLocal: true//該請求來自本地計算機

用document.onreadystatechange的方法來監聽狀態改變，
用document.readyState == 「complete」判斷是否加載完成

0 － uninitialized （未初始化）尚未調用send()方法
1 － loading （載入）已調用send()方法，正在發送請求
2 － loaded （載入完成）send()方法執行完成，已經接收到所有響應內容
3 － interactive （交互）正在解析響應內容
4 － complete （完成）響應內容解析完成，能夠在客戶端調用了

<-----------------------------------------------------jQuery js----------------------->
document.getElementById("testButton").addEventListener("click", Go, false);//添加監聽事件
window 的DOMContentLoaded事件在造成完成的DOM樹以後就會觸發，不理會圖像、JavaScript文件、CSS文件或其餘資源是否已經下載完畢。與load事件不一樣，DOMContentLoaded支持在頁面下載的早期添加事件處理程序，這也就意味着用戶可以儘早地與頁面進行交互。(它是火狐下特有的事件)
document.addEventListener('DOMContentLoaded', loaded, false);//

偵聽器在偵聽時有三個階段：捕獲階段(根節點到子節點檢查是否調用了監聽函數)→、目標階段(目標自己)→冒泡階段(目標自己到根節點)。
public override function addEventListener(type(事件類型):String, listener():Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

$(selector).bind(event) //向匹配元素添加一個或更多事件處理器
$(selector).live(event) //向匹配元素添加一個事件處理器，如今或未來
$(selector).die() 移除全部經過 live() 函數添加的事件處理器
$(selector).unbind()移除被選元素的事件處理程序,適用於任何經過 jQuery 附加的事件處理程序

Tmpl提供了幾種tag：
${}：等同於{{=}}，是輸出變量，經過了html編碼的。
{{html}}:輸出變量html,可是沒有html編碼，適合輸出html代碼。
{{if }} {{else}}:提供了分支邏輯。
{{each}}:提供循環邏輯，$value訪問迭代變量。

devicePixelRatio:設備像素比,高清iPad下，window.devicePixelRatio爲2
(/ipad/gi).test(navigator.appVersion)//判斷移動終端的瀏覽器是否爲ipad,navigator.appVersion爲瀏覽器的版本

window.orientation :這個屬性給出了當前設備的屏幕方向，0表示豎屏，正負90表示橫屏（向左與向右）模式
onorientationchange : 在每次屏幕方向在橫豎屏間切換後，就會觸發這個window事件，用法與傳統的事件相似

頁面事件前後順序：
mobileinit:頁面沒加載DOM以前事件
pagebeforecreate:頁面的DOM加載後，DOM初始化以前觸發的事件
pagecreate:在HTML已經在DOM中創建完成，初始化也完成事件
pageinit:頁面徹底加載完後

觸摸事件
三種在規範中列出並得到跨移動設備普遍實現的基本觸摸事件：
1. touchstart：手指放在一個DOM元素上。
2. touchmove：手指拖曳一個DOM元素。
3. touchend：手指從一個DOM元素上移開。
每一個觸摸事件都包括了三個觸摸列表：
1. touches：當前位於屏幕上的全部手指的一個列表。
2. targetTouches：位於當前DOM元素上的手指的一個列表。
3. changedTouches：涉及當前事件的手指的一個列表。
例如，在一個touchend事件中，這就會是移開的手指。
這些列表由包含了觸摸信息的對象組成：
1. identifier：一個數值，惟一標識觸摸會話（touch session）中的當前手指。
2. target：DOM元素，是動做所針對的目標。
3. 客戶/頁面/屏幕座標：動做在屏幕上發生的位置。
4. 半徑座標和 rotationAngle：畫出大約至關於手指形狀的橢圓形。

gesturestart  //當兩個手指接觸屏幕時觸發
gesturechange //當兩個手指接觸屏幕後開始移動時觸發
gestureend
onorientationchange  //屏幕旋轉事件
orientationchange  // 檢測觸摸屏幕的手指什麼時候改變方向

// 隱藏地址欄 & 處理事件的時候，防止滾動條出現

addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});

e.preventDefault()//取消事件的默認動做
taphold :長按事件

var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});//定義一滾動對象
hScroll:false 禁止橫向滾動 true橫向滾動默認爲true
vScroll:false 禁止垂直滾動 true垂直滾動默認爲true
hScrollbar:false 隱藏水平方向上的滾動條
vScrollbar:false 隱藏垂直方向上的滾動條
fixedScrollbar: 在iOS系統上，當元素拖動超出了scroller的邊界時，滾動條會收縮，設置爲true能夠禁止滾動條超出scroller的可見區域。默認在Android上爲true， iOS上爲false
fadeScrollbar:false 指定在無漸隱效果時隱藏滾動條
hideScrollbar: 在沒有用戶交互時隱藏滾動條默認爲true
bounce: 啓用或禁用邊界的反彈，默認爲true
momentum: 啓用或禁用慣性，默認爲true，此參數在你想要保存資源的時候很是有用
lockDirection:false 取消拖動方向的鎖定， true拖動只能在一個方向上（up/down 或者left/right）
zoom:true 滾動對象能夠放大縮小
zoomMax: 指定容許放大的最大倍數，默認爲4
onScrollEnd:在滾動完成後的回調
x:滾動水平初始位置
y:滾動垂直初始位置
bounce:true,是否超過實際位置反彈
bounceLock:false,當內容少於滾動是否能夠反彈，這個實際用處不大
momentum:true,動量效果，拖動慣性
lockDirection:true,當水平滾動和垂直滾動同時生效時，當拖動開始是否鎖定另外一邊的拖動
useTransform:true,是否使用CSS形變
useTransition:false,是否使用CSS變換
topOffset:0,已經滾動的基準值(通常狀況用不到)
checkDOMChanges:false,是否自動檢測內容變化

【注意事項】：若是想要圖片縮放的效果很好的話要把他們放到硬件的合成層中。通俗點說，就是在全部須要縮放的img元素上使用"margin: 0px; padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; line-height: 21px;">
document.createElement()是在對象中建立一個對象，要與appendChild() 或 insertBefore()方法聯合使用。其中，appendChild() 方法在節點的子節點列表末添加新的子節點。insertBefore() 方法在節點的子節點列表任意位置插入新的節點。
<script type="text/javascript">
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "button";
e.value = "這是測試加載的小例子";
var object = board.appendChild(e);
</script>

encodeURI()//編碼
decodeURI()//解碼

<video> 標籤屬性：
src：視頻的URL
poster：視頻封面，沒有播放時顯示的圖片
preload：預加載
autoplay：自動播放
loop：循環播放
controls：瀏覽器自帶的控制條
width：視頻寬度
height：視頻高度

中止:
myVideo.currentTime = 0;
myVideo.pause();

瀏覽器的渲染和操做順序大體以下：

HTML解析完畢
外部腳本和樣式表加載完畢
腳本在文檔內解析並執行
HTML DOM徹底構造起來
圖片和外部內容加載
網頁完成加載

<--------------------tmpl替換-------------------------->

1 news_template = $('#news_template').template();
2 $.tmpl(news_template, manufacture_news).appendTo('#news_content');
3 var html = $("#news_content").html();
4 if (html.indexOf("[br]") > -1)
5 {
6 html = html.$replace("[br]", "<br />");
7 html = html.$replace("&lt;", "<").$replace("&gt;", ">");
8 $("#news_content").html(html);
9 }

1 <script id="news_template" type="text/x-jquery-tmpl">
2 <div class="p_items">
3 <dt class="fix"><h1>${Title}</h1><span>${CreateTime}</span></dt> 
4 <dd>
5 <div style="text-align:center;"><a  href="http://app.dianshijie.net/dzd">${Img}</a></div>
6 <p>${Content}</p>
7 </dd>
8 </div>
9 </script>

------------------數據庫優化---------------------
A、數據類型儘可能用數字型，數字型的比較比字符型的快不少。

B、數據類型儘可能小，這裏的儘可能小是指在知足能夠預見的將來需求的前提下的。

C、儘可能不要容許NULL，除非必要，能夠用NOT NULL+DEFAULT代替。

D、少用TEXT和IMAGE，二進制字段的讀寫是比較慢的，並且，讀取的方法也很少，大部分狀況下最好不用。

E、自增字段要慎用，不利於數據遷移。

系統設計階段應該概括一些業務邏輯放在數據庫編程實現，數據庫編程包括數據庫存儲過程、觸發器和函數。用數據庫編程實現業務邏輯的好處是減小網絡流量並可更充分利用數據庫的預編譯和緩存功能。

----------
索引的設計

在設計階段，能夠根據功能和性能的需求進行初步的索引設計，這裏須要根據預計的數據量和查詢來設計索引，可能與未來實際使用的時候會有所區別。

關於索引的選擇，應改主意：

A、根據數據量決定哪些表須要增長索引，數據量小的能夠只有主鍵。

B、根據使用頻率決定哪些字段須要創建索引，選擇常常做爲鏈接條件、篩選條件、聚合查詢、排序的字段做爲索引的候選字段。

C、把常常一塊兒出現的字段組合在一塊兒，組成組合索引，組合索引的字段順序與主鍵同樣，也須要把最經常使用的字段放在前面，把重複率低的字段放在前面。

D、一個表不要加太多索引，由於索引影響插入和更新的速度。

注意SELECT INTO後的WHERE子句，由於SELECT INTO把數據插入到臨時表，這個過程會鎖定一些系統表，若是這個WHERE子句返回的數據過多或者速度太慢，會形成系統表長期鎖定，諸塞其餘進程。
A、控制同一語句的屢次執行，特別是一些基礎數據的屢次執行是不少程序員不多注意的。

B、減小屢次的數據轉換，也許須要數據轉換是設計的問題，可是減小次數是程序員能夠作到的。

C、杜毫不必要的子查詢和鏈接表，子查詢在執行計劃通常解釋成外鏈接，多餘的鏈接錶帶來額外的開銷。

---------尖角代碼
<div style="width: 0px; height: 0px; border: solid 50px transparent; border-bottom: solid 100px black;"></div>

手機版網站起碼要實現一些基本的功能吧：
1.頁面的適用性問題。對於移動終端，有不同的分辨率與屏幕尺寸，若是還像電腦端的設計還限制網頁的寬度爲1003px或其餘像素值，字體大小還用12px或14px，那麼，不同的終端的效果差異會很大。因此這裏，最好讓網頁的寬度自適應屏幕，還好，w3c在設計html的時候爲咱們考慮了這一點，只需一句話，就能夠搞定，就是加上

1 Javascript代碼  
2 <meta name="viewport" content="width=device-width"/>

對於字體的話，咱們就用em或ex爲單位就好
2.版本製做問題。移動頁面每每針對不一樣的手機設置不一樣的版本，通常有精簡版，標準版，3G版，觸屏版，智能手機版等等，這些除了在頁面設計上有不一樣外，頁面語言也會不一樣的。精簡版採用wap 1.0 的wml腳本編寫，這個通用性之前很強，不少國產手機都支持這個語言的，但這個語言是很精簡的。標準版的通常能夠採用wap 2.0技術，對應的腳本語言是xhtml mp(xhtml mobile profile)，這個語言是xhtml的子集，這個而且支持大部分的css,基本上和電腦版的差很少，但通常不能用js，這是考慮到這些手機是不支持 js的。對於智能手機版，因爲如今的智能手機都支持js，這個版本的製做上就簡單多了，不過，又因爲大部分智能手機（基本上除去塞班手機，包括 Android,ios,wp7等）都支持Html5，所以，智能手版能夠採用html5來製做。
3.版本控制問題。可能這部分是比較很差解決的，怎麼智能判斷手機的最佳版本並跳轉，能夠從這幾個方面考慮。一方面，能夠想辦法獲得手機的操做系統，好比，Android的，ios的，就能夠跳轉到html5版了，windows系統，毫無疑問電腦版，得到手機系統，可能經過獲得手機型號，如今的方法是經過瀏覽器的UA（user agent)，得到手機的一些信息，簡單一點的，直接能夠經過UA判斷手機的製造產商。要想得到更多的信息，就得有一個數據庫，由於不一樣手機型號會有不一樣的UA信息，世界上的手機有不少，本身要想作一個這樣的數據庫仍是很難的，不過，已經有人爲咱們作好了這樣的數據庫，或者更方便的，作好了一個識別手機適用最佳版本的函數庫，這裏我推薦用Wurfl。另外一方面，能夠經過頁面的腳原本判斷瀏覽器對js和html5的支持，代碼以下

Javascript代碼

<?xml version="1.0" encoding="UTF-8"?>  
<!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">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="width=device-width"/>  
<title>版本控制</title>  
<script type="text/javascript">  
window.onload = function(){  
  //檢測是否支持js  
  try{//檢測是否支持html5  
    document.getElementById("c").getContext("2d");  
    document.location = '支持html5版的連接';  
  }catch(e){//不然跳到支持js版  
    document.location = '支持js版';  
  }  
};  
</script>  
</head>  
  
<body>  
<canvas id='c'></canvas>  
普通版  
</body>  
</html>

若是你僅僅想開發一個版本，只是判斷一下是否是移動客戶端，這裏引用一段discuz! x2的代碼

Php代碼

 1 <?php  
 2 function checkmobile() {  
 3     global $_G;  
 4     $mobile = array();  
 5     static $mobilebrowser_list =array('iphone', 'android', 'phone', 'mobile', 'wap', 'netfront', 'java', 'opera mobi', 'opera mini',  
 6                 'ucweb', 'windows ce', 'symbian', 'series', 'webos', 'sony', 'blackberry', 'dopod', 'nokia', 'samsung',  
 7                 'palmsource', 'xda', 'pieplus', 'meizu', 'midp', 'cldc', 'motorola', 'foma', 'docomo', 'up.browser',  
 8                 'up.link', 'blazer', 'helio', 'hosin', 'huawei', 'novarra', 'coolpad', 'webos', 'techfaith', 'palmsource',  
 9                 'alcatel', 'amoi', 'ktouch', 'nexian', 'ericsson', 'philips', 'sagem', 'wellcom', 'bunjalloo', 'maui', 'smartphone',  
10                 'iemobile', 'spice', 'bird', 'zte-', 'longcos', 'pantech', 'gionee', 'portalmmm', 'jig browser', 'hiptop',  
11                 'benq', 'haier', '^lct', '320x320', '240x320', '176x220');  
12     $useragent = strtolower($_SERVER['HTTP_USER_AGENT']);  
13     if(($v = dstrpos($useragent, $mobilebrowser_list, true))) {  
14         $_G['mobile'] = $v;  
15         return true;  
16     }  
17     $brower = array('mozilla', 'chrome', 'safari', 'opera', 'm3gate', 'winwap', 'openwave', 'myop');  
18     if(dstrpos($useragent, $brower)) return false;  
19   
20     $_G['mobile'] = 'unknown';  
21     if($_GET['mobile'] === 'yes') {  
22         return true;  
23     } else {  
24         return false;  
25     }  
26 }  
27   
28 function dstrpos($string, &$arr, $returnvalue = false) {  
29     if(emptyempty($string)) return false;  
30     foreach((array)$arr as $v) {  
31         if(strpos($string, $v) !== false) {  
32             $return = $returnvalue ? $v : true;  
33             return $return;  
34         }  
35     }  
36     return false;  
37 }  
38 var_dump(checkmobile());//若是是移動端返回true，不然false