shape

实验性： 这是一项实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

可以使用shape CSS 媒体特性来测试设备的形状，以区分矩形和圆形显示屏。

语法

shape 离散特性指定为以下两个可接受字符串之一：rect表示矩形屏幕，round表示圆形、椭圆形或椭圆形屏幕。

rect

形状为轴对齐矩形或正方形，或类似形状（如圆角矩形），传统设计适用于此类形状。

round

形状为圆形或类似形状（如椭圆形、椭圆形），独特的圆形设计适用于此类形状。

示例

基本示例

HTML

html
<h1>Hello World!</h1>

CSS

css
h1 {
  text-align: left;
}

@media (shape: rect) {
  h1 {
    text-align: left;
  }
}

@media (shape: round) {
  h1 {
    text-align: center;
  }
}

自定义样式表

此 HTML 将为具有圆形屏幕的设备应用特殊的样式表。

html
<head>
  <link rel="stylesheet" href="default.css" />
  <link
    media="screen and (shape: rect)"
    rel="stylesheet"
    href="rectangle.css" />
  <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
</head>

规范

规范
CSS 圆形显示器级别 1
# shape-media-feature

浏览器兼容性

尚无浏览器实现此功能。

另请参阅