检测设备的显示特性

简介
使用JavaScript来检测显示特性
使用CSS来检测显示特性
- CSS媒体查询示例

简介

可以使用JavaScript和/或CSS媒体查询来检测设备的显示尺寸并对其作出反应。例如，可以根据屏幕宽度和高度来更改页面背景色。测量显示尺寸时有两个不同的指标：屏幕尺寸和视口大小。

屏幕尺寸是指设备物理屏幕的尺寸。
视口大小是指屏幕上窗口的大小。

ScreenSize示例演示了如何使用JavaScript和CSS来检测设备的显示尺寸并对其作出反应。此示例的代码位于Amazon Web SDK的以下文件夹中：

Amazon-Web-SDKs/Webapps/examples/Cookbook/ScreenSize/

从SDK下载页面下载Amazon Web SDK（单击Web按钮）。

使用JavaScript检测显示特性

使用JavaScript检测显示尺寸时，有两个不同的对象对应于两个不同的显示尺寸指标：

screen对象包含有关屏幕尺寸的信息。
window对象包含有关视口大小的信息。

可以查询screen对象的以下属性：

选择器	接受min-和max-修饰符	描述	媒体查询中的用法示例
height	是	描述窗口的高度。	`@media screen and (min-height: 640px) { ... }`
width	是	描述窗口的宽度。	`@media screen and (min-width: 640px) and (max-width: 800px) { ... }`
aspect-ratio	是	描述窗口的宽高比。该值由两个正整数组成，用斜线(/)分隔，表示水平像素（第一项）与垂直像素（第二项）之比。	`@media screen and (min-aspect-ratio: 1/1) { ... }`
device-height	是	描述整个屏幕的高度。	`@media screen and (min-device-height: 640px) { ... }`
device-width	是	描述整个屏幕的宽度。	`@media screen and (min-device-width: 640px) { ... }`
device-aspect-ratio	是	描述整个屏幕的宽高比。该值由两个正整数组成，用斜线(/)分隔，表示水平像素（第一项）与垂直像素（第二项）之比。	`@media screen and (min-device-aspect-ratio: 16/9) { ... }`
orientation	否	表示视口是横向还是纵向。	`@media screen and (orientation: portrait) { ... }`
resolution	是	表示输出设备的分辨率（像素密度）。	`@media screen and (min-resolution: 2dppx) { ... }`

使用CSS检测显示特性

使用CSS媒体查询来检测不同的显示尺寸并对其作出反应。使用以下CSS选择器来检测窗口大小或屏幕尺寸：

CSS媒体查询示例

要根据设备当前处于纵向还是横向模式来更改背景色，请使用以下示例代码：

/* blue background when in portrait */
@media screen and (orientation: portrait) { background: #88F; }

/* green background when in landscape */
@media screen and (orientation: landscape) { background: #8F8; }

要根据输出设备的分辨率（像素密度）更改背景色，请使用以下示例代码：

/* blue background when pixel density is between 1 and 2 dots per pixel */
@media screen and (min-resolution: 1dppx) and (max-resolution: 2dppx) { background: #88F; }

/* green background when pixel density is at least 2 dots per pixel */
@media screen and (min-resolution: 2dppx) { background: #8F8; }