手机页面开发总结

手机页面开发总结_

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      70px;
2     border: 0;
3     border-bottom: thin solid;
4     //解决苹果手机自带的圆角效果
5     border-radius: 0px;
6     background-color: #f4f4f4;

View Code