开发者控制台

检测设备的显示特性

检测设备的显示特性

简介

可以使用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; }