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

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

 

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

一．初探

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

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

 <meta name="viewport"content="width=device-width,user-scalable=no" />

 

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

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

二．原来如此

那么我是查看一个实现了动态适配屏幕的hybird项目才明白的。虽然我看不到源码，但是我通过浏览器的调试功