手機頁面開發總結_

1,圖片像素不要用具體px,要用% px

2,左右邊距也用%px

3,字體上,若是過小的px 手機上和電腦上是有區別的最好的狀況是用pt

4,對於get請求所帶參數,參數之間不要留空格,否則讀取數據時會取不到值

   (面對若是名稱沒有錯,值也有的狀況,那麼就觀察你的url 看參數名稱以後是否出現奇怪的字符)

5,面對多個單選框取值,首先爲他們取同一個name 值(這樣能保證它只能單選,不會出現多選)->給他們賦value值->循環單選框判斷他們的checked 屬性,在取值

6, 面對不一樣手機的不一樣系統可能會出現寬度不一樣的狀況,

    (

//  actionInfo   myButton 樣式

var buttonWidth = $(".actionInfo").width() + 44;
$(".myButton").width(buttonWidth);

)

7,前提頁面獲取系統當前時間與你所定義時間對比 

 ( new Date().getTime() < new Date(endtime).getTime()  轉化成同一串數字 )

8,判斷距離結束時間的方法 

 1    // endTime  定義的結束時間       
 2   function D_Time(endTime) {
 3             var obj = $("#lbl_Time");
 4             var endtime = new Date(endTime).getTime();
 5             var nowtime = new Date().getTime();
 6             var youtime = endtime - nowtime;
 7             var seconds = youtime / 1000;
 8             var minutes = Math.floor(seconds / 60);
 9             var hours = Math.floor(minutes / 60);
10             var days = Math.floor(hours / 24);
11             var CDay = days;
12             var CHour = hours % 24;
13             var CMinute = minutes % 60;
14             var CSecond = Math.floor(seconds % 60);
15             if (endtime <= nowtime) {
16                 obj.html("已過時");
17 
18             } else {
19                 if (days > 0) {
20                     obj.append("" + days + "天" + CHour + "時" + CMinute + "分" + CSecond + "秒");
21                 }
22                 else if (CHour > 0) {
23                     obj.append("" + CHour + "時" + CMinute + "分" + CSecond + "秒");
24                 }
25                 else if (CMinute > 0) {
26                     obj.append("" + CMinute + "分" + CSecond + "秒");
27                 }
28                 else if (CSecond > 0) {
29                     obj.append("" + CSecond + "秒");
30                 }
31             }
32             setTimeout("D_Time()", 1000);
33         }

View Code

 9,防止頁面出現縮放

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta charset="utf-8" />

View Code

 10,文本框變直線

1     width: 70px;
2     border: 0;
3     border-bottom: thin solid;
4     //解決蘋果手機自帶的圓角效果
5     border-radius: 0px;
6     background-color: #f4f4f4;

View Code