- 移动应用开发中自适应布局是非常重要的,因为不同设备分辨率不一样,大小也不一样,不采用自适应布局在不同的设备中显示会出现各种问题
- 能够起到自适应布局的方法
- CSS3中的自适应布局
- 百分比布局法:即大小,位置,边距等用百分比来限制,能够在不同的设备中占据总体的布局一致
- webkit-box结合-webkit-box-flex布局法:使用webkit-box能够实现弹性盒子模式布局,结合-webkit-box-flex能够实现将屏幕完全分割的布局,与半分比不同的是:百分比布局在存在border的时候不好控制,因为如果总体是100%,再加上border就会超过总体值,当然也可以在使用百分比的基础上加上box-sizing:border-box将border设置为占用内部空间来解决这个问题,但是现在主流的布局还是使用webkit-box
- 媒体查询布局法:@media screen and (max-width:400px),采用媒体查询法定义不同型号设备使用的样式,给每种尺寸的设备分别定义样式,这种方法有一定的作用,但是在Android设备越发混乱的市场状况下,设备尺寸越来越繁杂,不适合整体靠媒体查询来实现自适应布局
- JS中动态实现自适应布局
- 通过JS获取屏幕大小,经过计算动态创建布局,这种方式太复杂,而且在移动端影响体验,基本被抛弃
- 监听resize事件与oritationchange事件实现在设备状态发生改变时对应布局的改变
- CSS3中的自适应布局
- Android中的自适应机制
Android中通常采用dp与sp为单位进行布局,因为采用这两个单位会根据设备分辨率进行自动缩放,默认将设备宽度都定义为360dp
- Hybrid App开发工具中的布局
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-
- 首先需要viewport支持,这种设置方式在Appcan、HBuilder、apicloud中都支持,针对此种设计方法有哪些自适应布局方法?
- 页面在webview中的显示原理:页面在webview中的真实大小一般是360,然后将其拉升到响应的分辨率,因此html在webview中的线条是那么的粗,看上去就明显不是1px,那是因为最终显示是经过放大后的,并不是一个物理像素,通常是1.5或者2个物理像素,因此整个界面看上去是那么的粗,不够精致,图片也是放大后的,可能会出现模糊现象
- 这种布局特点:
- px:不同尺寸不同分辨率中px同样px值大小是一样的,即是固定大小
- em:根据字体设置大小来显示,对于不同分辨率的设备来说是不一样大的,即是可缩放大小吗,与dp和sp类似,建议不居中采用该单位进行布局
- 精细化布局方式
- 首先研究原理,在Android中1px并不是1物理像素,而是经过放大后的,但是在IOS中却是真实的1物理像素,这样使得应用在IOS中看上去效果要好的多,这是为什么?
- IOS中的UIWebview会识别html5中viewport中的width属性,根据width属性来改变设备的分辨率与物理像素比例
- Android中相对的属性是target-densitydpi,但是在Android4.4以后就废弃了这个属性,也就是说使用4.4以后的Android SDK 打包就不能支持该属性
- 首先研究原理,在Android中1px并不是1物理像素,而是经过放大后的,但是在IOS中却是真实的1物理像素,这样使得应用在IOS中看上去效果要好的多,这是为什么?
- 在apicloud中,编译环境采用的是4.4以上的Android SDK,即不支持target-densitydpi属性,不能够使整个应用精细化,很多人想方设法实现1px线条,通过:after或:before来添加一个1px的div,然后对div进行缩放,实现真实1px线条,但是这样做太繁琐,而且解决不了圆角的问题,其他地方都变成1px了,按钮却还是粗border,这样更加影响体验
- HBuilder在最初采用的是API20环境打包的,也不支持该属性,但是最近改成了API19,实现了对于该属性的支持,可见虽然Android官方废除了,但是其作用仍然很大
- Appcan一直以来都是使用的4.4以下的Android SDK环境打包的,因此一直支持该属性,有人曾经说过Appcan用的是Android2.3的引擎,apicloud用的是4.4以后的引擎,因此apicloud比Appcan速度更加快,这些只是那些不懂的人才会说的,现如今Appcan的速度却等同于甚至高于apicloud怎么解释?看我发的测试随笔就知道
- 首先需要viewport支持,这种设置方式在Appcan、HBuilder、apicloud中都支持,针对此种设计方法有哪些自适应布局方法?
- 建议:
- 使用HBuilder与Appcan的开发人员页面中一定要加上
-
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
来显示精致化界面,在布局中采用em来布局,因为这样设置后px在不同分辨率下得到的效果是不一样的
- 在apicloud中布局使用px与em在不同设备上真实差距不是很大
- 也希望apicloud能够适配target-densitydpi属性的支持,而不要像论坛版主问他为什么放弃使用该属性,就说Android不支持了,HTML5定稿中废弃了该属性,说我钻牛角尖,既然别人能用,你为什么不能用,废弃并不代表不可以用,Android中废弃的方法多了去了,有的方法还不是照样使用
时间: 2024-10-25 18:49:31