移动前端开发：待处理

viewport
http://www.cnblogs.com/2050/p/3877280.html
web-app-rem
http://isux.tencent.com/web-app-rem.html
http://121.40.99.17/global/rem-phone.html
 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>rem phone test</title>
 7     <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 8     <style>
 9         html {
10             height: 100%;
11             width: 100%;
12             font-family: 'Heiti SC', 'Microsoft YaHei';
13             font-size: 20px;
14             overflow: hidden;
15             outline: 0;
16             -webkit-text-size-adjust:none;
17         }
18         body {
19             height: 100%;
20             margin: 0;
21             overflow: hidden;
22             -webkit-user-select: none;
23             position: relative;
24         }
25         header,
26         footer {
27             width: 100%;
28             line-height: 1.5rem;
29             font-size: 1rem;
30             color: #000;
31             border: 1px solid #ccc;
32             text-align: center;
33             background-color: #ccc;
34         }
35         .bd {
36             margin-top: 1rem;
37             margin-bottom: .5rem;
38             margin-right: -.5rem;
39             font-size: 0;
40         }
41         .box {
42             width: 5rem;
43             height: 5rem;
44             display: inline-block;
45             margin-right:.5rem;
46             margin-bottom: .5rem;
47         }
48         .blue-box {
49             background-color: #06c;
50         }
51         .org-box {
52             background-color: #1fc195;
53         }
54     </style>
55     
56 </head>
57 
58 <body>
59 
60     <header>我是头部</header>
61 
62 
63     <div class="bd">
64         <div class="box blue-box"></div>
65         <div class="box org-box"></div>
66         <div class="box blue-box"></div>
67         <div class="box org-box"></div>
68         <div class="box blue-box"></div>
69         <div class="box org-box"></div>
70     </div>
71 
72 
73     <footer>我是页脚</footer>
74     
75     <script>
76         (function (doc, win) {
77           var docEl = doc.documentElement,
78             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
79             recalc = function () {
80               var clientWidth = docEl.clientWidth;
81               if (!clientWidth) return;
82               docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
83             };
84 
85           if (!doc.addEventListener) return;
86           win.addEventListener(resizeEvt, recalc, false);
87           doc.addEventListener('DOMContentLoaded', recalc, false);
88         })(document, window);
89     </script>
90 </body>
91 
92 </html>
View Code