最近在做一个win8的应用。因为之前没做过android之类的多分辨率平台的应用,所以一开始没有考虑到多分辨率的问题。从头到尾都是按照1366X768的分辨率来做。知道昨天师兄提醒了一下才发现这个致命的错误。可怜我的应用布局都做好了。( ;´Д`)
之前基本上都是用多少px来定死了控件大小和位置的。因此在1366X768的分辨率下显示没有什么问题。但是一旦改变了分辨率,都会出现布局凌乱的问题。看了网上一些解决方法,还有问了师兄的意见,总结出三个方法:
1.针对不同的分辨率作出不同的布局,这个是比较麻烦的做法,当然出来的效果是最好的。
在程序的首页显示出来之前,加上
var appWidth = window.outerWidth;
var appHeight = window.outerHeight;
就能获取当前用户使用的设备的分辨率,这样就可以根据分辨率选择不同布局。
官方提供了下面这种方法来重置你的布局
function handleResize(eventArgs) {
var appWidth = eventArgs.view.outerWidth;
var appHeight = eventArgs.view.outerHeight;
...
}
window.addEventListener("resize", handleResize);
2. 在css设置控件的时候使用百分比来进行设置,这样就能够适合任何的分辨率。当然,这种方法第1种要简单,只是效果没那么好,因为这只是简单的根据分辨率的不同对控件进行放大缩小。
3.第3种猥琐方法是某师兄提出的,写多几套css来根据分辨率选择,效果大致跟第二种相同,但是会方便一点,毕竟能够微观调控嘛。