5

我有一个遵循响应式网页设计技术的网络应用程序。我想为电视提供不同（更大）的字体大小，为屏幕提供不同（更小）的字体，即使两者具有相同的分辨率。为什么？因为当用户将 32" 显示器用作屏幕时，他可能比将其用作电视的用户更靠近它。

编码：

body {font-size:14px;}

@media (min-width:1900px) {body {font-size:20px;}}

@media tv and (min-width:1900px) {body {font-size:30px;}}

应该做所有的工作（如果我了解媒体查询如何正常工作）。但他们不 - 电视显示字体大小为 20 像素的文本（这是因为索尼 Bravia 电视中的 Opera 浏览器不支持tv- 多么讽刺......）。

所以我的问题是：还有哪些其他的电视检测技术是可能的？

  1. User-Agent，但是当电视参加聚会时，它没有标准化的模式。
4

1 回答 1

0

如果您有一台 50 英寸的电视和一台 32 英寸的显示器，它们都以相同的分辨率运行，您可以使用不使用该tv and语法的媒体查询。这是因为对于浏览器来说，两个屏幕本质上是相同的，除了 50 英寸电视将有更多像素（在此处查看更多内容）。因此，您的媒体查询可以简单地集中在width和/或height断点上。

body {
  font-size: 14px;
}

@media screen and (min-width:500px) {
  body {
    font-size: 20px;
    color: blue;
  }
}

@media screen and (min-width:900px) {
  body {
    font-size: 30px;
    color: green;
  }
}
<p>Hello World</p>

注意：尝试以全尺寸模式运行上述代码并调整浏览器窗口的大小。您应该会看到相应的字体大小和颜色变化。

于 2018-08-09T18:25:48.343 回答