第一步：頁面頭部標(biāo)簽的申明

　?、?聲明文檔，在這里我們采用的是Html5的申明文檔

1	`<!DOCTYPE` `html>`

　　② 禁止瀏覽器縮放

1	`<meta` `name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">`

　　③ 設(shè)置瀏覽器編碼類型

1 2	`<meta` `http-equiv="Content-Type" content="text/html; charset=utf-8" />` `<meta` `content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" />`

　?、?清除瀏覽器緩存

1
2
3 <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">

　?、?nbsp;iPhone 手機(jī)上設(shè)置手機(jī)號碼不被顯示為撥號鏈接

1	`<meta` `content="telephone=no, address=no" name="format-detection" />`

　　⑥ IOS私有屬性，可以添加到主屏幕

1	`<meta` `name="apple-mobile-web-app-capable" content="yes" />`

　?、?nbsp;IOS私有屬性，網(wǎng)站開啟對 web app 程序的支持

1	`<meta` `name="apple-mobile-web-app-status-bar-style" content="black-translucent" />`

　　對于上面的meta屬性，有不了解的同志可以看看這篇文章：傳送門

第二步：解決IE6~IE9對Html5和Css3的支持問題

　　① 讓IE6~8支持CSS3偽類和屬性選擇器

1
2
3 

　?、?讓IE9以下的瀏覽器支持Html5標(biāo)簽和媒體查詢器（主要用于響應(yīng)式網(wǎng)站開發(fā)）

1
2
3
4 

上面兩步的具體代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" id="test">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" />

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">

<meta content="telephone=no, address=no" name="format-detection" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<title>手機(jī)webApp</title>



</head>

這樣我們就部署好一個簡單WebApp頭部了

第三步：添加重置樣式（reset.css）和解決手機(jī)WebApp字體和圖片等標(biāo)簽問題

　　① 添加重置樣式，主要為了解決瀏覽器部分標(biāo)簽在各大瀏覽器上顯示的一致問題(reset.css)

1
2
3
4
5
6
7
8
9
10
11
12 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

　　② 設(shè)置手機(jī)字體和部分標(biāo)簽樣式問題(common.css)

1
2
3
4
5
6
7 /* 禁用iPhone中Safari的字號自動調(diào)整 */
html { -webkit-text-size-adjust: none; }
/* 設(shè)置HTML5元素為塊 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
/* 設(shè)置圖片視頻等自適應(yīng)調(diào)整 */
img { max-width: 100%; height: auto; width: auto9; /* ie8 */ }
.video embed, .video object, .video iframe { width: 100%; height: auto; }

　　通過上面三個步驟，一個基本的手機(jī)WebApp框架就構(gòu)建好了。

　　但是還缺點(diǎn)什么呢？那就是讓手機(jī)支持觸摸事件！在這里我推薦一個js插件，hammer.js。

　　相信大家對hammer.js還不夠熟悉，為大家粗略介紹一下：

　　hammer.js是一款開源的移動端腳本框架，他可以完美的實(shí)現(xiàn)在移端開發(fā)的大多數(shù)事件，如：點(diǎn)擊、滑動、拖動、多點(diǎn)觸控等事件。不需要依賴任何其他的框架，并且整個框架非常小，在使用時(shí)非常簡單。并且hammer.js的兼容性和拓展性非常好，hammer.js主要針對觸屏的6大事件進(jìn)行監(jiān)聽。如下圖所示：

　　在這里我就不具體介紹：對于hammer.js的詳細(xì)用法，請移步：hammer.js開發(fā)教程

第四步：為手機(jī)添加觸屏插件：hammer.js

1	`<script` `type="text/javascript" src="scripts/hammer.js"></script>`

這樣一個稍微完整的WebApp開發(fā)框架就搭配好了，詳細(xì)代碼：

HTML代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 <!DOCTYPE html>
<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, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" />

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">

<meta content="telephone=no, address=no" name="format-detection" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<title>手機(jī)webApp</title>

<link type="text/css" href="css/reset.css" rel="stylesheet" />

<link type="text/css" href="css/common.css" rel="stylesheet" />

<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="scripts/hammer.js"></script>



</head>
<body>

</body>
</html>

Reset.css

Common.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129 /* 禁用iPhone中Safari的字號自動調(diào)整 */
html { -webkit-text-size-adjust: none; }
/* 設(shè)置HTML5元素為塊 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
/* 設(shè)置圖片視頻等自適應(yīng)調(diào)整 */
img { max-width: 100%; height: auto; width: auto9; /* ie8 */ }
.video embed, .video object, .video iframe { width: 100%; height: auto; }

body { font: 14px/22px "Georgia", Helvetica, Arial, sans-serif; background: #fff; color: #595959; overflow-y: scroll; overflow-x: hidden; *overflow-y: auto !important; }
a { text-decoration: none; cursor: pointer; }
.Wrapper { width: 100%; padding: 0; margin: 0; }
li { list-style: none; }
a { text-decoration: none; color: #555756; }
a:hover { color: #141414; text-decoration: none; }
a img { border: none; }
a > img { vertical-align: bottom; }
.min-height { min-height: 0; height: auto; _height: 0; overflow: hidden; _overflow: visible; }
.position-absolute { position: absolute; }
.position-relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/*
* -----------------------------------------
* 320 ~ 480
* -----------------------------------------
*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
}

/*
* -----------------------------------------
* 321 ~ 寬大于321的設(shè)備
* -----------------------------------------
*/
@media only screen and (min-width: 321px) {
}

/*
* -----------------------------------------
* ~ 320 寬小于320的設(shè)備
* -----------------------------------------
*/
@media only screen and (max-width: 320px) {
}

/*
* -----------------------------------------
* ~ 480 寬小于480的設(shè)備
* -----------------------------------------
*/
@media only screen and (max-width: 480px) {
}

/* medium screens (excludes iPad & iPhone) */
/*
* -----------------------------------------
* 481 ~ 767 寬大于480且小于767的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-width: 481px) and (max-width: 767px) {
}

/* ipads (portrait and landscape) */
/*
* -----------------------------------------
* 768 ~ 1024 寬大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}

/* ipads (landscape) */
/*
* -----------------------------------------
* 768 ~ 1024 寬大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
}

/* ipads (portrait) */
/*
* -----------------------------------------
* 768 ~ 1024 寬大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
}

/*
* -----------------------------------------
* 1444 ~ 1824 寬大于1444且小于1824的設(shè)備
* -----------------------------------------
*/
@media only screen and (min-width: 1444px) and (max-width: 1824px) {
}

/*
* -----------------------------------------
* 1824 ~ 寬大于1824的設(shè)備
* -----------------------------------------
*/
@media only screen and (min-width: 1824px) {
}

/*
* -----------------------------------------
* 2224 ~ 寬大于2224的設(shè)備
* -----------------------------------------
*/
@media only screen and (min-width: 2224px) {
}

/* iphone 4 and high pixel ratio (1.5+) devices */
/*
* -----------------------------------------
* iphone4 ~
* -----------------------------------------
*/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
/* iphone 4 and higher pixel ratio (2+) devices (retina) */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}

上一篇：Flutter 在安卓上可以實(shí)現(xiàn)熱更新了

下一篇：Azure 部署 Asp.NET Core Web App

返回列表

无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

13530005652

第一步：頁面頭部標(biāo)簽的申明

第二步：解決IE6~IE9對Html5和Css3的支持問題

第三步：添加重置樣式（reset.css）和解決手機(jī)WebApp字體和圖片等標(biāo)簽問題

第四步：為手機(jī)添加觸屏插件：hammer.js