NO IMAGE

http://bbs.php100.com/read-htm-tid-482066.html

目前有很多不錯的mobile開發框架可以使用,這些框架已經為手機端的特殊性提供了很好的支援和效果外掛,比如:jquery mobile、kendoui等~~

不過,謝謝框架因為其開源性或商業化,可能你學習和認知起來會有一定的時間,維護起來會有一定的困難。另外,通過一段時間的專案實驗,我發現,這些框架的【個性化】比較少,也就是說,它提供的樣式就是最終的樣式了,你修改他的樣式最終做出符合自己效果圖的東西還是比較困難的。也就是說:使用框架進行批量生產可以,製作個性站點就有點複雜!

那麼我是製作方法就是自己去按寫網頁的方法去寫手機端的頁面。這需要注意幾個方面:

1.新增特定的meta資訊:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />

上述的幾個meta資訊,第一個是設定手機端的螢幕尺寸的,第二個是設定iphone端頁面全屏的,第三個則是取消數字被識別為電話號碼的!當然,還有其他很多,你可以google一下,我的專案中通常只用到這幾個而已!

第一個meta寫法就可以到達你要的效果!…………

2.圖片解析度

大家都知道手機端螢幕目前來說大部分都是視網膜螢幕,普通的圖片顯示起來通常會變的比較模糊,通常的做法就是把圖片設定為雙倍,顯示為正常,比如:我要顯示200*100的圖片,那麼我可以做一個400*200的圖片,然後在呼叫的時候寫:<img src=”123.jpg” style=”width:200px;height:100px;” alt=”” />這樣圖片被縮小一倍後就顯示的清楚了。

css中圖片,通常也需要設定一下background-size屬性,常用的就是cover、0px 100%;等這樣的值,他主要實現等比縮放、單向縮放。比如,我有一個圖示,是使用的背景,該元素的尺寸是20*20,圖片檔案的尺寸是40*40,那麼,可以在css中這樣細寫:
.aa {width:20px;height:20px;background:url(images/aa.png) no-repeat center top; background-size:cover;}
但是,如果寫一個漸變效果,或者帶紋理的效果,那就需要使用到單邊縮放了,也就是一個方向保持原始的尺寸,一個方向拉伸為指定的尺寸。

3.字型字號

可以繼續沿用PC網頁中的12、14、16、18px這樣的設定,以16px為基準就可以了(始終的大小),12號最小,用於說明類的資訊。特殊字號統一設定。

4.css3

圓角、投影、背景透明度還是需要使用css3的。這些東西也通常寫到一個獨立的檔案中,因為他要涉及很多寫法,太過分散不宜維護,例如:

#aa,.bb,span {border-radius:5px;  -webkit-border-radius:5px;  -moz-border-radius:5px;  -o-border-radius:5px;}

5.滾動條

手機端不支援css的滾動條屬性,也就是,平時我們在電腦端設定一個容器的內容溢位後出現滾動條,但是手機端不會。利用手機端的滾動條有多種方法,
第一種是犧牲站點效果,使用通頁佈局,這個就是像平時的網頁一樣,一個很長很長的頁面,這樣系統就有滾動條的。模擬全屏應用就沒辦法了。

第二種是使用iscroll外掛,他可以配合你的框架設定方法來完成一個全屏app的設計,比如:你設定頭部、頁尾的尺寸和固定位置,然後,用js動態設定內容區域的寬度就可以了,然後給內容區域設定滾動條。

6.觸屏事件 touchstart、touchmove、touchend

觸屏事件是手機端專有的js事件,他可以用來製作很多東西,通常手機端的拖動幻燈片、slider控制元件等都需要用到拖動事件,不過,拖動事件的呼叫方法是這樣的:
複製程式碼

$(document).ready(function(){
var inX,inY,deX,deY,touch2,canDrag;
//按下
document.getElementById("tba").addEventListener("touchstart",function(e){
var touch = e.targetTouches[0];
canDrag = true;
$("#debug ul").append('<li>觸控開始...</li>');
$("#tba").addClass("tba_down");
//元素自身位置
var dePos = $("#tba").position();
deX = dePos.left;
deY = dePos.top;
//按下時的位置
inX = touch.pageX - deX;
inY = touch.pageY - deY;
$("#posa").text(touch.pageX   ":"   touch.pageY);
//拖放
document.getElementById("tba").addEventListener("touchmove",function(e){
if(canDrag){
var touch2 = e.targetTouches[0];
e.preventDefault();
$("#posb").text(touch2.screenX   ":"   touch2.screenY);
$("#tba").css({left:touch2.screenX - inX,top:touch2.screenY - inY});
}
});
});
//鬆開
document.getElementById("tba").addEventListener("touchend",function(e){
$("#debug ul").append('<li>觸控結束...</li>');
$("#tba").animate({left:"0px",top:"0px"});
$("#tba").removeClass();
canDrag = false;
});
......
.....

具體的用法個人還沒有研究。不過你也是可以使用第三方外掛完成的,比如:http://www.jqueryrain.com/2012/07/flipsnap-js-snap-scroll-for-touch-device/

7.行高line-height

有款瀏覽器叫歐朋瀏覽器。這貨不支援圓角、不支援投影、不支援行高,他只支援類似wap的網頁介面。而系統原生的瀏覽器以及一些大的知名手機瀏覽器對上述東西的支援還是比較好的。但是,因為手機瀏覽器設計的各異,很多方法和效果可能在不同的瀏覽器上有不同的使用效果,比如:UC瀏覽器的左右滑動翻頁,百度瀏覽器的向上滑動關閉等,他們很有可能和我們自身設計的方法衝突,導致頁面被錯誤的關閉等….

總結:
手機端的頁面和電腦端的頁面一樣,也可以分為普通樣式和個性樣式,普通樣式的話,能夠支援大多數的瀏覽器。模擬app就稍微麻煩一些,需要給頁面引用大量的js效果,這包括頁面載入、系統控制元件等,有些手機瀏覽器幫我們完成了,有些則需要手動設計,完完全全的模擬手機app還是比較複雜的(模擬不如直接基於SDK開發一個)。

OK,發一個自己做的專案截圖: