Question

我目前正在设计一个网页，用于在商场的LED屏幕上显示动态内容。

我需要确保我设计的内容完全符合显示器的高度和宽度。屏幕尺寸为42“，分辨率为1280×720。

如何确保我设计的内容完全适合屏幕？一世我更担心让它垂直适合。
如何设计自动适应和适合的内容本身就是这么长的垂直屏幕？
是否有任何工具可以帮助我完成设计过程？

Digital Billboard

Answer 1

你应该没有太多问题，只需将高度设置为1280像素，宽度设置为720像素。

一个好的模板是：

<!doctype html>
<html>
    <head>
        <style>
            #wrapper {
                height:1280px;
                width:720px;
                outline:1px black solid; // useful when designing to see where boundary of screen is.
            }

        </style>
    </head>
    <body>
        <div id="wrapper">
            <!-- Everything goes in here. -->
        </div>
    </body>
</html>

您需要找出他们正在使用的浏览器，然后在该浏览器中进行设计。您可能会发现它使用IE 7运行Windows XP Embedded。

为了便于使用IE7，我建议设置运行浏览器的虚拟机。你可以在这里从Microsoft获得这个：http://www.microsoft.com/en-us/download/details.aspx?id=11575&mnui=0，或者如果你在OSX或Linux上，那么坦率地说https://github.com/xdissent/ievms可能很方便。

值得仔细考虑最小字体大小是可读的。您可能还会发现，如果它是一个已旋转的普通屏幕，子像素将旋转90˚，也就是说，它们将垂直排列，而不是从左向右移动RGB。在这种情况下，微软的Cleartype看起来很奇怪，所以如果打开它，那么你会发现较小的文字非常模糊。（它可以左右不像上下像素，所以旋转的屏幕会大大抛弃它。）

我会尝试获取一个屏幕副本，或者只是通过电视运行它并转过头来近似它：）

Answer 2

问题1,3：让自己成为firefox的“Web Developer”插件。在工具栏中的“调整大小”下，选择“编辑调整大小尺寸”并添加“宽度：720，高度：1280”。现在，您可以单击调整大小，并确切了解您的设计将如何在所需的屏幕分辨率上显示。

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

关于你的问题2：使用jQuery，您可以添加以下代码：

$(document).ready( function(){
  var height = $(window).height();
  var width = $(window).width();
  if(width>height) {
    // Landscape
    $("body").addClass("landscape");
  } else {
    // Portrait
    $("body").addClass("portrait");
  }
}

它会将“portrait”或“landscape”类添加到页面“body”元素中。您现在可以将此类添加到CSS规则中以进行条件设计。

Answer 3

您的好处是只需要支持一个设备和分辨率，但您可能会面临一些挑战。

挑战

确保内容完全适合分配的空间（空白区域在显示器上看起来很糟糕，当然会溢出（当然）。
处理可能较旧的浏览器（如@Rich Bradshaw所指出的）和平庸的CPU / GPU。
典型桌面显示器与较大显示器之间的像素密度差异。
色温/解释和字体渲染差异。

可能有帮助的事情

我的第一步是看看你是否可以将一个设备作为测试的借用者。我曾与多家公司合作过，他们很乐意在特殊要求需要时提供/提供设备。如果您对视觉设计的任何部分负责（例如，确保颜色不会流血，字体平滑等），这一点尤为重要。
如果您无法获得实际设备，请至少查看它是否已针对特定颜色配置文件进行校准，然后您可以在本地计算机上进行设置（在Windows中，它位于“颜色管理”下）。
如果内容是静态的，那么将固定维度布局组合起来非常容易，甚至可以在旧浏览器上使用。
如果内容本质上是动态的，您可以尝试类似jQuery Masonry的内容，它会尝试将不同的内容放入动态网格中。但是，它可能会导致尺寸大于您的要求，因此您仍需要大致了解原始内容。这假设您运行的是一个有点现代的JavaScript引擎IE7 +）
确保您正常失败。在PC /移动设备上使用的网站上布局错误已经够糟糕了，但是在购物中心的大屏幕上的错误确实很突出。

我发现这些使用Google TV的指南非常有用，因为它们涉及更大屏幕上的设计/实施：https://developers.google.com/tv/web/docs/design_for_tv

如何设计大型垂直显示器的网页？

3 个答案:

挑战

可能有帮助的事情