2

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

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

  1. 如何确保我的设计完全适合屏幕？我更担心让它垂直适合。

  2. 我如何设计能够自动适应并适应如此长的垂直屏幕的内容？

  3. 是否有任何工具可以帮助我完成设计过程？

数字广告牌

4

3 回答 3

2

你不应该有很多问题，只需将你的高度设置为 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，我建议设置一个运行浏览器的虚拟机。你可以在这里从微软那里得到这个：http: //www.microsoft.com/en-us/download/details.aspx?id= 11575&mnui= 0，或者如果你在 OSX 或 Linux 上，坦率地说很棒的https:// github.com/xdissent/ievms可能很方便。

值得仔细考虑可读的最小字体大小。你可能还会发现，如果是旋转过的普通屏幕，子像素会旋转 90˚，即 RGB 不是从左到右，而是垂直排列。在这种情况下，微软的 Cleartype 看起来会很奇怪，所以如果打开它，你会发现较小的文本非常模糊。（它适用于左右像素而不是上下像素，因此旋转的屏幕会大大甩掉它）。

我会尝试获取屏幕的副本，或者只是通过您的电视运行它并将头侧向以近似它:)

于 2012-05-06T08:47:14.683 回答
1

问题 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 规则中以进行条件设计。

于 2012-05-06T08:56:04.333 回答
1

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

挑战

  • 确保内容完全适合分配的空间（空白在这样的显示器上看起来很糟糕，因为会溢出（当然）。

  • 处理可能较旧的浏览器（正如@Rich Bradshaw 指出的那样）和平庸的 CPU/GPU。

  • 典型的桌面显示器和更大的显示器之间的像素密度差异。

  • 色温/解释和字体渲染差异。

可能有帮助的事情

  • 我的第一步是看看您是否可以将设备作为借用人提供给您进行测试。我曾与不止一家公司合作过，他们乐于在需要满足特定要求时借出/提供设备。如果您负责视觉设计的任何部分（例如，确保颜色不渗色、字体平滑等），这一点尤其重要。

  • 如果您无法获得实际设备，请至少查看它是否已校准到特定的颜色配置文件，然后您可以在本地机器上设置（在 Windows 中，它位于“颜色管理”下）。

  • 如果内容是静态的，那么很容易组合一个固定尺寸的布局，甚至可以在旧浏览器上使用。

  • 如果内容本质上是动态的，您可以尝试使用jQuery Masonry之类的方法，它会尝试将不同的内容放入动态网格中。但是，它可能会导致尺寸大于您的期望，因此您仍然需要对原始内容有一个大致的了解。这假设您正在运行一个有点现代的 JavaScript 引擎 IE7+)

  • 确保你优雅地失败。在 PC/移动设备上使用的网站上的布局错误已经够糟糕的了，但在购物中心中间的大屏幕上的错误确实很突出。

我发现这些使用 Google TV 的指南在处理大屏幕上的设计/实现时很有用：https ://developers.google.com/tv/web/docs/design_for_tv

于 2012-05-06T09:00:36.623 回答