如何得到屏幕和可用显示区域的大小尺寸及运用分辨率无关的编程

在我们的很多的应用中，我们非常希望得到实际设备的屏幕尺寸大小．这样很方便我们进行我们的UI设计工作．在我们的Ubuntu应用设计中，我们经常会使用一个虚拟的尺寸单位units.gu．这对很多的已经习惯使用pixel的开发者来说，可能一下子并不容易理解．其实在我们的Ubuntu应用设计中，我们需要尽量来使用units.gu来设计我们的应用．这样我们的应用就可以在不同的屏幕尺寸中可以进行自动的适配．

分辨率无关：

Ubuntu的用户界面工具包的重要功能是把用户定义多个设备尺寸进行匹配。采取的方法是定义一个新的单元类型，网格单元（简写为gu）。网格单位转换为像素值取决于应用程序运行在屏幕上和设备的类型。下面是一些例子：

Device	Conversion
Most laptops	1 gu = 8 px
Retina laptops	1 gu = 16 px
Smart phones	1 gu = 18 px

更多的关于分辨率无关的知识可以在链接找到。

比如目前我们公司出的MX4的手机的分辨率如下：



当我们的应用只使用units.gu为长度单位来编程的话，那么无论将来我们的屏幕尺寸变得多大，我们的应用的长宽比不会发生变化，也就是说我们的应用的布局不会发生变化．对我们的MX4来说，宽度为50gu，高度为80gu．如果我们的平板的宽度及高度还是这么定义的话，那么我们的手机应用在平板上的运行将没有任何的变化．只是在平板上每个units.gu对应的pixel的数值将和我们现在的MX4会有不同．

为了侦测到我们每个设备的特性，我做了如下的一个测试应用：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "pagesizeingu.liu-xiao-guo"

/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true

width: units.gu(100)
height: units.gu(75)

Page {
header: Item { visible: false }

Rectangle {
id: rect
anchors.fill: parent

Component.onCompleted: {
console.log("rect: " + rect.width + " " + rect.height)
client.text = "client area width: " + rect.width/units.gu(1) + "gu height: " + rect.height/units.gu(1) + "gu"
}

onWidthChanged: {
console.log("rect: " + rect.width + " " + rect.height)
clientgu.text = "client area width: " + Math.round(rect.width/units.gu(1)) + "gu height: " + Math.round(rect.height/units.gu(1)) + "gu"
client.text = "client area (" + rect.width + ", " + height + ")"
}

onHeightChanged: {
console.log("rect: " + rect.width + " " + rect.height)
client.text = "client area (" + rect.width + ", " + height + ")"
clientgu.text = "client area width: " + Math.round(rect.width/units.gu(1)) + "gu height: " + Math.round(rect.height/units.gu(1)) + "gu"
}
}

Column {
anchors.centerIn: parent

Label {
id: info
}

Label {
id: resulution
}

Label {
id: gutopixel
}

Label {
id: clientgu
}

Label {
id: client
}

Label {
text: "1 dp = " + units.dp(1) + " pixels"
}

Label {
text: "1 gridUnit = " + units.gridUnit + " pixels"
}
}

Component.onCompleted: {
console.log("screen: " + screensize.width + " " + screensize.height)
resulution.text = "screen resolution: (" +  screensize.width + ", " + screensize.height + ")"
info.text = "screen width: " + Math.round(screensize.width/units.gu(1)) + "gu  height: " + Math.round(screensize.height/units.gu(1)) + "gu"
gutopixel.text = "1 units.gu = " + units.gu(1) + " pixels"
}
}
}

把该应用运行到我们的MX4手机上：



从上面的显示结果看出

1 units.gu = 23 pixels

同样的应用运行到我们的DELL电脑上（分辨率1920x1080):



从上面的输出可以看出来在电脑上：

1 units.gu = 8 pixels

当我们设计我们的电脑设计应用时，我们可以按照240ux135u来设计的话，就不会有任何的问题．

在我们的Ubuntu M10上运行的话：





整个项目的源码在：https://github.com/liu-xiao-guo/pagesizeInGu