移动设备上的“hello word”
时常有人在网上或者在技术群里问：移动端网页怎么做啊！？
且不说移动端网页怎么做，html、css你会么？PC端的网页你做过么？
如果回答是：会，做过。
那么，移动端网页就没你想象的那么难了!
记得当初我做第一个移动端网页的时候，还是把淘宝的移动端h5页面扒了下来，看了看他的html5的代码和css3代码！
看了之后，觉得新鲜但是又不那么陌生！
新鲜是因为我看到了一些以前没有看到过的代码，不陌生是因为除了部分代码，其他代码和PC段代码并无两样。
记得当初看到的那段新鲜代码：
html5:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta content="yes" name="apple-mobile-web-app-capable"> 6 <meta content="yes" name="apple-touch-fullscreen"> 7 <meta content="telephone=no" name="format-detection"> 8 <meta content="black" name="apple-mobile-web-app-status-bar-style"> 9 <meta property="wb:webmaster" content="c51923015ca19eb1"> 10 <title>淘宝网触屏版</title> 11 <meta name="author" content="m.taobao.com"> 12 <meta name="copyright" content="Copyright ©m.taobao.com 版权所有"> 13 <meta name="revisit-after" content="1 days"> 14 <meta name="keywords" content=""> 15 <meta name="description" content=""> 16 <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 17 </head>
css3:
1 /* 浏览器重置样式 [[*/ 2 body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,menu{margin:0;padding:0;} 3 article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;} 4 h1,h2,h3,h4,h5,h6,input,textarea,select,button,label{font-size:100%;font-weight:100;} 5 input,textarea,select,button,label{vertical-align:middle;} 6 img,fieldset,input[type="submit"]{border:none;} 7 input{outline:none;background:transparent;vertical-align:top;} 8 input::-ms-clear{display:none;} 9 table{border-collapse:collapse;border-spacing:0;} 10 button{cursor:pointer;border:none;} 11 textarea{word-wrap:break-word;resize:none;-webkit-box-shadow:none;} 12 input,textarea,select{-webkit-appearance:none;outline:none;} 13 input:-moz-placeholder{color:#C4C4C4;} 14 ::-webkit-input-placeholder{color:#C4C4C4;} 15 select::-ms-expand{display:none;} 16 ::-ms-check{display:none;} 17 body{font-family:"微软雅黑";-webkit-user-select:none;-khtml-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0.4);overflow:hidden;font-size:1em;line-height:1em;background:#1C1F26;} 18 body,html{height:100%;} 19 a{text-decoration:none;color:#333333;-webkit-touch-callout:none;} 20 a:hover{background-color:;} 21 a,button,input{-webkit-touch-callout:none;} 22 /* 浏览器重置样式 ]]*/
戳我，你戳我啊！淘宝触屏版
如果还觉着不过瘾，再戳戳以下网站，偷窥偷窥她们吧！
美团
安居客
大众点评网
赶集网
天猫
打开调试器，慢慢偷窥她们吧！
如果觉着还是看着不过瘾，搜索m.XXXX.com或者3g.XXXX.com（XXX为某著名网站域名），自己试探吧！
哪个神不是说过么：站在巨人的肩上！（Standing on Shoulders of Giants！）
站在巨人的肩上干嘛？不是撒尿，而是借助已有的，用来强大自己。
回过头来，淘宝触屏版的代码值得我们学习的还是head标签里边的那一大堆meta和浏览器重置的基本样式。
有空我们再聊聊他们吧！
先给大家做个简单的移动端“hello word”的demo吧！
点我 hello word
