① 声明文档,在这里我们采用的是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"> |
③ 设置浏览器编码类型
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"> |
⑤ iPhone 手机上设置手机号码不被显示为拨号链接
1 | < meta content="telephone=no, address=no" name="format-detection" /> |
⑥ IOS私有属性,可以添加到主屏幕
1 | < meta name="apple-mobile-web-app-capable" content="yes" /> |
⑦ IOS私有属性,网站开启对 web app 程序的支持
1 | < meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> |
对于上面的meta属性,有不了解的同志可以看看这篇文章:传送门
① 让IE6~8支持CSS3伪类和属性选择器
1 2 3 |
<!--[if lte IE 8]> <script src="scripts/selectivizr.js"></script> <![endif]--> |
② 让IE9以下的浏览器支持Html5标签和媒体查询器(主要用于响应式网站开发)
1 2 3 4 |
<!--[if lt IE 9]> <script src="scripts/css3-mediaqueries.js"></script> <script src="scripts/html5shiv.js"></script> <![endif]--> |
上面两步的具体代码:
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"> <!--iPhone 手机上设置手机号码不被显示为拨号链接)--> < meta content="telephone=no, address=no" name="format-detection" /> <!--IOS私有属性,可以添加到主屏幕--> < meta name="apple-mobile-web-app-capable" content="yes" /> <!--屏幕顶部条的颜色--> < meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> < title >手机webApp</ title > <!--让IE8,IE9,支持Html5和Css3--> <!--[if lte IE 8]> <script src="scripts/selectivizr.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="scripts/css3-mediaqueries.js"></script> <script src="scripts/html5shiv.js"></script> <![endif]--> </ head > |
这样我们就部署好一个简单WebApp头部了
① 添加重置样式,主要为了解决浏览器部分标签在各大浏览器上显示的一致问题(reset.css)
1 2 3 4 5 6 7 8 9 10 11 12 |
html, body, div, span, applet, object, iframe, h 1 , h 2 , h 3 , h 4 , h 5 , h 6 , 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 ; } |
② 设置手机字体和部分标签样式问题(common.css)
1 2 3 4 5 6 7 |
/* 禁用iPhone中Safari的字号自动调整 */ html { -webkit-text-size-adjust: none ; } /* 设置HTML5元素为块 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display : block ; } /* 设置图片视频等自适应调整 */ img { max-width : 100% ; height : auto ; width : auto 9 ; /* ie8 */ } .video embed , .video object, .video iframe { width : 100% ; height : auto ; } |
通过上面三个步骤,一个基本的手机WebApp框架就构建好了。
但是还缺点什么呢?那就是让手机支持触摸事件!在这里我推荐一个js插件,hammer.js。
相信大家对hammer.js还不够熟悉,为大家粗略介绍一下:
hammer.js是一款开源的移动端脚本框架,他可以完美的实现在移端开发的大多数事件,如:点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架,并且整个框架非常小,在使用时非常简单。并且hammer.js的兼容性和拓展性非常好,hammer.js主要针对触屏的6大事件进行监听。如下图所示:
在这里我就不具体介绍:对于hammer.js的详细用法,请移步:hammer.js开发教程
1 | < script type="text/javascript" src="scripts/hammer.js"></ script > |
这样一个稍微完整的WebApp开发框架就搭配好了,详细代码:
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"> <!--iPhone 手机上设置手机号码不被显示为拨号链接)--> < meta content="telephone=no, address=no" name="format-detection" /> <!--IOS私有属性,可以添加到主屏幕--> < meta name="apple-mobile-web-app-capable" content="yes" /> <!--屏幕顶部条的颜色--> < meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> < title >手机webApp</ title > <!-- 重置样式 --> < link type="text/css" href="css/reset.css" rel="stylesheet" /> <!-- 主样式 --> < link type="text/css" href="css/common.css" rel="stylesheet" /> <!-- Jquery库 --> < script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></ script > <!-- 手机触摸 --> < script type="text/javascript" src="scripts/hammer.js"></ script > <!--让IE8,IE9,支持Html5和Css3--> <!--[if lte IE 8]> <script src="scripts/selectivizr.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="scripts/css3-mediaqueries.js"></script> <script src="scripts/html5shiv.js"></script> <![endif]--> </ head > < body > </ body > </ html > |
Reset.css
1 2 3 4 5 6 7 8 9 10 11 12 |
html, body, div, span, applet, object, iframe, h 1 , h 2 , h 3 , h 4 , h 5 , h 6 , 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 ; } |
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的字号自动调整 */ html { -webkit-text-size-adjust: none ; } /* 设置HTML5元素为块 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display : block ; } /* 设置图片视频等自适应调整 */ img { max-width : 100% ; height : auto ; width : auto 9 ; /* 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的设备 * ----------------------------------------- */ @media only screen and ( min-width : 321px ) { } /* * ----------------------------------------- * ~ 320 宽小于320的设备 * ----------------------------------------- */ @media only screen and ( max-width : 320px ) { } /* * ----------------------------------------- * ~ 480 宽小于480的设备 * ----------------------------------------- */ @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的设备 * ----------------------------------------- */ @media only screen and ( min-width : 1444px ) and ( max-width : 1824px ) { } /* * ----------------------------------------- * 1824 ~ 宽大于1824的设备 * ----------------------------------------- */ @media only screen and ( min-width : 1824px ) { } /* * ----------------------------------------- * 2224 ~ 宽大于2224的设备 * ----------------------------------------- */ @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) { } |
深蓝互联成立于2013年,是一家物联网硬件开发及软件应用服务商,获得多次获得国家高新技术企业资质的企业。深蓝互联专注软硬件技术开发的专业性技术公司。我们从事软硬件开发十年,擅长SaaS 平台开发、APP小程序开发、软硬件结合开发,在视觉识别处理、数据架构、云计算、多线程高并发和集群、数据安全加密和防护方便有很深的技术积累。
我们拥有专业优秀的设计和技术团队,以极具创意的 UI 设计、精湛卓越的开发技术,专业的网络策划团队。公司多年来投入打造物联网SaaS平台,集成了公司研发的多款智能物联网终端(智能鲜米机、生鲜售货机、自助洗车机、小区电瓶车充电系统等)。
公司一直坚持以研发为导向,打造软硬件结合的物联网平台系统。将一直坚持提高开发的技术实力更好的为我们的客户服务!
文章来自深蓝互联http://www.szdbi.com/WEBkaifajishu/322.html转载请注明出处!