课时1—布局 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>移动端页面参考代码模板</title>
 6     <!--说明：user-scalable=no是需要的，用户是否可以手动缩放，因为发现某些设备上仅仅有initial和maximum仍然无法阻止缩放-->
 7     <meta content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width"  name="Viewport"/>
 8     <!--touch-icon用于在ios中显示桌面图标-->
 9     <link href="http://img01.taobaocdn.com/tps/il/Tlzo51XxXfXXXeOHro-144-144.png"   rel="apple-touch-icon-precomposed"/>
10     <!--从桌面ico启动ios Safari是否进入全屏状态（App模式）yes|no    删除默认的苹果工具栏和菜单栏-->
11     <meta content="yes" name="apple-mobile-web-app-capable"/>
12     <!--ios在全屏状态下的状态栏模式  default | balck | black-translucent-->
13     <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
14     <!--ios设备上禁止将数字识别为可点击的tel link （拨号链接）-->
15     <meta content="telephone=no" name="format-detection"/>
16 
17   <!--用于设定网页的到期时间，过期则必须到服务器上重新调用,content="-1"，网页在任何时候都不能被Cache存储-->
18     <meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">
19 
20 </head>
21  <!--移动端版本兼容 -->
22  <script type="text/javascript">
23       var jsVer = 15;
24       var phoneWidth = parseInt(window.screen.width);
25       var phoneScale = phoneWidth/640;
26       var ua = navigator.userAgent;
27       if (/Android (\d+\.\d+)/.test(ua)){
28        var version = parseFloat(RegExp.$1);
29        // andriod 2.3
30        if(version>2.3){
31         document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
32        // andriod 2.3以上
33        }else{
34         document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
35        }
36        // 其他系统
37       } else {
38        document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
39       }
40  </script>
41  <!--移动端版本兼容 end -->
42 <!--safrai浏览器影藏地址栏-->
43 <script type="text/javascript">
44   window.addEventListener('load',function(){
45       setTimeout(function(){window.scrollTo(0,1);},100);
46   });
47 </script>
48 <!--safrai浏览器影藏地址栏 end-->
49 
50  <style type="text/css">
51     *{
52        -webkit-box-sizing:border-box;
53        -moz-box-sizing:border-box;
54        box-sizing:border-box;
55     }
56    
57     /*绝对定位布局*/
58     .header,footer,.wrap-page{position: absolute;left: 0; right: 0;}
59     .header,.footer{ height: 44px; background-color: #fff; text-align: center;z-index: 900; line-height: 44px;}
60     .header{ top: 0;border-bottom: 1px solid #f00;}
61     .footer{bottom: 0; border-top: 1px solid #f00;}
62     /*给wrap-page设定高度然后实现滚动*/
63     .wrap-page{top: 44px; bottom: 44px; overflow-y:auto;-webkit-overflow-scrolling:touch;}
64     .page{
65       padding: 10px;
66     }
67     /*.page p{
68       margin-bottom: 10px;
69     }*/
70 
71  </style>
72 <body>
73 
74 <header class="header fixed-top"></header>
75 <!--二层header 如搜索框
76 <section class="header-sub"></section>-->
77 <footer class="footer fixed-bottom"></footer>
78 <!--内容-->
79 <div class="wrap-page">
80   <!--一个page一个页面-->    
81   <section class="page"></section>
82   <section class="page"></section>
83 </div>
84 
85 
86 </body>
87 </html>

整体布局

移动端整体布局氛围上中下三部分，如图：

一般header和footer部分为fixed定位，中间内容可滚动。

常规结构：

<header class="header fixed-top"></header>
<div class="wrap-page">
    <section class="page"></section>
    <section class="page"></section>
    ...

</div>
<footer class="footer fixed-bottom"></footer>

移动端页面是单页面特性，所以每个page为一个页面，整体被wrap-page包裹，page内容可以滚动，所以给wrap-page一个具体高度，使用原生-webkit-overflow-scrolling:touch;来实现滚动，当然对于不支持的，也可以使用iscroll兼容，而iscroll同样需要一个固定高度的容器来包裹可以滚动的内容。

header和footer采用fixed定位，固定高度，因此wrap-page要设置padding-top和padding-bottom。

绝对定位布局

直接参考demo，关键在于设置wrap-page的top，bottom的距离为header和footer的高度。

css代码如下：

.header,.footer,.wrap-page{
  position:absolute;
  left:0;
  right:0;}

.header,.footer{
  height:44px;
  background-color: #fff;
  text-align: center;
  z-index:900;
  line-height:44px;}

.header{
  top: 0;
  border-bottom: 1px solid #f00;}

.footer{
  bottom: 0;
  border-top: 1px solid #f00;}

.wrap-page{
  top: 44px;
  bottom: 44px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;}

.page{
  padding: 10px;}

.page p{
  margin-bottom: 10px;}

这个布局的缺陷在于滚动的时候地址栏不隐藏，safari浏览器可以通过下面js代码来隐藏地址栏，其他浏览器经测试不可以

window.addEventListener('load', function(){   setTimeout(function(){ window.scrollTo(0, 1); }, 100);});

如果你实在要除掉浏览器的地址栏和工具栏，可以设置meta标签为应用模式，参考新建空白页面的其他meta部分

 

<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

 

flex布局

可以通过这个简单的demo来测试：flex layout demo

设置body为flex布局，方向为垂直方向，wrap-page的flex为1。这个跟上面的绝对定位一样，还是滚动的时候地址栏不隐藏，safari同样可以通过js来搞定，其他浏览器不可以

 

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;}

.wrap-page {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;}

.header,.footer{
  height:44px;
  background-color: #fff;
  text-align: center;
  line-height:44px;
  position:relative;
  z-index:990;}

.header{
  border-bottom: 1px solid #f00;}

.footer{
  border-top: 1px solid #f00;}

.wrap-page{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;}

.page{
  padding: 10px;}

.page p{
  margin-bottom: 10px;}

 

总结

因为fixed定位，滚动的时候bug太多，特别是有表单元素的时候得慎用；而flex布局兼容方面有一定问题，好像性能也不是很好，况且如果是在 body下面直接布局的话，只有上中下这几个元素还好，如果再添加上弹窗，panel什么的子元素搞不好还有问题得深入；所以选择绝对定位相对来说还是比 较靠谱的。而优化的元素位置关系，因为国产的安卓手机太多，有些还不太支持，再加上隐藏的元素选择器还有效，所以暂时不考虑。

最后我们一般采用常规结构的绝对定位来布局。

出处：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-mobile-layout.html

 

 

 

posted @ 2016-10-09 14:09  Naomi❤  阅读(240)  评论(0)  编辑  收藏  举报