我现在的项目是使用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项目才明白的。虽然我看不到源码,但是我通过浏览器的调试功