本节主要讲述如何开发：非手机设备、非等比例屏幕适配的快应用
通过本节，你将学会：
当前开发者开发的快应用，适配到不同屏幕分辨率的设备时，居多采用的是等比例的放大缩小方案完成的；
因为开发者所采用的方案，大多定义manifest.json中的designWidth为固定值，比如：默认的750或者1080，然后代码中使用百分比或者px单位完成适配；
这种方案的原理就是将所有运行的设备：在屏幕宽度上做一定数值的等分，然后完成同等比例的放大缩小完成适配；
注意：是基于屏幕宽度的等分，不是应用实际渲染可见宽度，比如：负一屏中快应用卡片场景，卡片的实际渲染宽度要比屏幕全宽小；
然而，非等比例的屏幕适配也是开发前常见的一种需求，比如：不同屏幕大小时显示的内容不同，大屏时显示的文字内容更多，小屏时显示内容较少；
另外，非全屏宽的布局也在快应用的部分场景中比较常见，比如：负一屏中快应用卡片渲染，其卡片所渲染的宽度相对屏幕全宽要小；
还有，横屏时的屏幕适配也在快应用开发中比较常见，比如：适配到 Pad、电视、车机等之类的横屏设备；
本节主要基于以上几个方面的需求，提供一些建议与指导；
在H5移动站点的开发中，关于视口viewport的概念，存在两个指向：布局视口和可见视口；
前者指的是页面实际渲染所占据的大小，比如：如果页面中不声明<meta name="viewport">时，布局视口默认为980；
后者指的是页面对用户来说，在不缩放拖动情况下，可见区域的大小，这个通常指的就是屏幕宽度，即：webview以占据全屏幕宽的方式展现；
为了给用户最佳的浏览体验，开发者一般将布局视口设置为可见视口的大小，即：<meta name="viewport" conent="width=device-width">；
上面meta标签中width代表如何定义页面实际渲染的宽度，device-width代表的是可见视口的宽度（注意：非屏幕宽度）；
比如：在屏幕宽度为420DP的设备上，定义某个Webview的应用显示宽度为300DP时，device-width对应的值为300；
此时，某个最外层元素如果width设置为：300px、100%时，就代表渲染占据可见视口的宽度，此时1px对应Android中的1dp；
1080+DP是Android开发中常见的单位，也称为：设备独立像素（Device Independant Pixels）；
DP的计算公式为： 屏幕宽度的DP值 = 设备屏幕分辨率的宽度 / DPR = 设备dpi / 160；
DPR也称为Screen Density屏幕密度，获取设备的屏幕密度值可以通过规范文档中的device接口获取；
比如：当屏幕分辨率的宽度为1080像素、DPR为3时，对应的屏幕DP宽度为360，即：360dp；
提示：实际上，屏幕分辨率、设备dpi、屏幕宽度dp值是可以通过系统设置更新的，修改某个变量会相应导致其它变量更新换算；
引入DP单位，开发者可以解决非等比例的屏幕适配；
比如：在DPR为3的小屏幕上希望内容显示较少，设置元素的宽度dp较小，在DPR为3的大屏幕上希望内容显示较多，设置元素的宽度dp较大；
该单位可以像px单位一样，用于常见的DOM元素的宽度、高度上；
当前快应用平台针对DP单位的支持正在开发中，请使用如下方式作为临时解决方法：
开发者可以在manifest.json中定义designWidth:"device-width"，并在代码中使用px替代dp单位来临时解决，此时的1px即为1dp；
后期应用中如果只会用到dp单位，还是推荐使用dp替换px来写样式；
当开发者希望页面中的字体大小跟随系统中设置的变化而变化时，可以在manifest.json中设置textSizeAdjust:auto解决；
具体请参考规范文档中的textSizeAdjust属性；
开发者可以通过下面的示例代码，获取屏幕与应用的相关DP值，具体请参考规范文档的device接口；
import device from "@system.device"
device.getInfo({
success: function(data) {
const {
screenDensity,
screenWidth,
windowWidth
} = data
console.info(`设备的屏幕密度DPR：${screenDensity}`)
console.info(`设备的屏幕分辨率的宽度：${screenWidth}`)
console.info(`应用的实际渲染窗口的宽度：${screenWidth}`)
const screenWidthInDP = screenWidth / screenDensity
console.info(`设备的屏幕宽度DP值：${screenWidthInDP}`)
const windowWidthInDP = windowWidth / screenDensity
console.info(`应用的实际渲染宽度DP值：${windowWidthInDP}`)
}
})
当开发者希望针对不同的设备环境进行不同的定义时，可以通过媒体查询来解决；
这些设备环境的指标包括：orientation、resolution等，具体请参考规范文档的媒体查询介绍；
媒体查询的示例如下：
<style>
/* 默认的样式定义*/
.page-tabs-auto {
background-color: red;
}
/* 媒体查询：屏幕横屏时的定义 */
@media(orientation: landscape) {
.page-tabs-auto {
background-color: blue;
}
}
</style>
如果开发者有其他围绕布局相关的需求，欢迎联系我们，您可以向快应用Github官方提交Issue；
比如：
希望应用中只有部分元素的字体大小跟随系统设置的变化而变化，即：引入SP单位
监听当前设备屏幕的变化，如：横竖屏切换
了解了以上信息之后，开发者就可以开发非等比例屏幕适配的快应用了，以及非全屏宽度下渲染的应用；