Question

我正在开发一个在互联网电视盒上运行的javascript应用程序。

我的应用程序UI在不同的电视分辨率（720p，1080p，2k，4k等）上应该看起来完全相同。 我的宽高比是16：9

我正在开发的设备 Opera 9.8 （我知道，它来自石器时代）

有没有办法通过纯CSS实现这一目标？

如果没有，那么javascript解决方案是什么？

Answer 1

使用此功能在文档正文上设置字体大小：

var setFonts = function() {
    var size = {
        height: window.innerHeight,
        width: window.innerWidth
    };
    var ratio = size.width / size.height;
    var max = 2;
    var factor = 1.98;
    if (ratio > max) {
        size.width = size.height * factor;
    }
    size.width = parseInt(size.width);
    document.body.setAttribute('style', 'font-size:' + size.width / 26 + 'px');
    window.fontSize = size.width / 26;
};

之后使用em设置每个尺寸（宽度，高度，字体大小等）（不是像素或百分比）。

Answer 2

如果您使用

，可以使用html5尝试bootstrap css

  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

这一行

   <meta name="viewport" content="width=device-width, initial-scale=1">

根据设备屏幕尺寸或宽高比自动更改页面布局。

以下是学习如何使用bootstrap http://www.w3schools.com/bootstrap/default.asp

的链接

希望这有帮助

使我的UI在不同的分辨率上看起来完全相同

2 个答案: