ionic2屏幕适配，动态调整大小

我现在的项目是使用ionic2给平板开发一个软件。第一个就是遇到屏幕适配的问题。官方的示例代码，放在平板上，也是会出现界面元素放不下的问题。当然，在小屏幕上，软件出现了滚动条，但是从视觉和操作上根本不满足我们软件的需要。因此我们需要软件更具屏幕的大小动态的适配。

而在这方面在网上很少能找到答案，对于我这个小白，可是不知所措。当然项目必须要做，因此就得探索学习。

一．初探

Ionic2其实使用使用的html5的，我们在搜索ionic屏幕适配的时候，一般会看到web屏幕适配。然后提到了viewport等，一般是说在index.html。head标签加如下配置

(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)

但是我们打开ionic的index文件，发现里面已经加了这句话。比如我的ionic2项目的index文件配置为：

其意思是，屏幕宽度保持与设备的屏幕一致。比例为一比一，即不放大，不缩小。同时关闭手动大小缩放。

二．原来如此

那么我是查看一个实现了动态适配屏幕的hybird项目才明白的。虽然我看不到源码，但是我通过浏览器的调试功能看到。其布局代码。研究了半天发现使用了flex属性。通过学习知道这个是动态分配元素大小的参数。其使用方法大体上来说是：使用div布局。父div设置flex属性。所有子div设置flex=1.。可以实现子div在父div里均匀分布。通过修改flex=?可以实现对应比例的布局。应用这个参数，我实现了我也没控件随着屏幕大小自动调整的目的。

当然这里还得说一下。父标签要设置 height=100%;的属性。这个属性可以使得页面随着设备屏幕的大小自动铺满。同时需要父标签设置居中属性：为了直观，实用。我这里贴出我的css布局代码：

这里贴一个完整的普通网页例子，供大家体验：

这个例子的功能是实现一个页面，分成好几行，每一行里面有几个平均分布的块）：

例子中属性height=“100%”; width: 100%;表示占满整个屏幕(动态)，从父标签到子标签都得使用这两个参数使得动态铺满父元素。

这个示例代码的效果可就是，你用鼠标拉动调整浏览器大小，页面也会跟着动态调整。应用到移动设备上，就会表现出随着屏幕大小动态铺满屏幕。

体验代码的css如下：

haha.css

.body {
    position: fixed;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;

}

.nav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.page {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    background-color: #abaaaa;
    padding-top: 5px;
    padding-bottom: 5px;
    flex-direction: column;
}

.row{
    display: flex;
    align-items: center;
    height: 93px;
    width: 100%;
    background-color: #cdcecf;
}

.cell{
   flex: 1;
   text-align: center;
   margin: 0 auto;
   margin: 20px;
}

index.html文件：

<!DOCTYPE html>

<html>

<head>
  
<meta charset="utf-8" />
  
<meta name="format-detection" content="telephone=no" />
  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  
<title>Integrion</title>

<link href="haha.css" rel="stylesheet">
</head>

<body>

<div class="nav">
	<div class="page">
		<div class="row">  
			<div class="cell">item</div>
			<div class="cell">item</div>
			<div class="cell">item</div>
		</div>
		<div class="row">  
			<div class="cell">item</div>
			<div class="cell">item</div>
			<div class="cell">item</div>
		</div>
		<div class="row">  
			<div class="cell">item</div>
			<div class="cell">item</div>
			<div class="cell">item</div>
		</div>
	</div>
</div>

</body>

</html>

另外：关于flex布局的说明，参考这篇文章：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

当然，学会了使用以上方法，把这个知识应用到ionic的页面布局，效果很好。

但是呢：但是重要，其实在ionic2的api文档里面提供了类似的布局元素。

那就是Grid，都怪我没有看完官网文档。现在，在我意识到这个grid，不是表格的意思，是布局用的。然后我就用这个布局系统重写写了我的页面，实现的效果是一样的。其本质原理都是使用了flex布局。（当然注意的地方是，要实现铺满屏幕即适配屏幕，就要给父元素设置height：100%和width：100%的css属性）。

乘着写博客的机会自己也整理一下。看看api文档的第一句话。地址为：

http://ionicframework.com/docs/v2/api/components/grid/Grid/

The grid is a powerful mobile-first flexboxsystem for building custom layouts. It is heavily influenced by Bootstrap's grid system.

这个grid是第一个手机弹性盒子自定义布局系统。其深受bootstrap的grid系统影响。

这里是我使用ionic自带的grid系统，实现的动态适配屏幕的代码示例

http://blog.csdn.net/robert_cysy/article/details/65443551

ionic2屏幕适配，动态调整大小

猜你喜欢