Html 如何为大型垂直显示器设计网页？_Html_Css_Resolution_Screen Orientation

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

html css

Html 如何为大型垂直显示器设计网页？,html,css,resolution,screen-orientation,Html,Css,Resolution,Screen Orientation,我目前正在设计一个网页，将用于在商场的LED屏幕上显示动态内容我需要确保我设计的内容完全符合显示器的高度和宽度。屏幕尺寸为42〃，分辨率为1280×720 我如何确保我所设计的完全符合屏幕？我我更担心的是如何使它垂直贴合我如何设计能够自动调整和适应的内容这么长的垂直屏幕有什么工具可以帮助我完成设计过程吗你不应该有太多问题，只要将身高设置为1280px，宽度设置为720px即可一个好的模板是： <!doctype html> <html> <he

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

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

我如何确保我所设计的完全符合屏幕？我我更担心的是如何使它垂直贴合

我如何设计能够自动调整和适应的内容这么长的垂直屏幕

有什么工具可以帮助我完成设计过程吗

你不应该有太多问题，只要将身高设置为1280px，宽度设置为720px即可

一个好的模板是：

<!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>


#包装纸{
高度：1280px；
宽度：720px；
轮廓：1px黑色实体；//在设计屏幕边界时非常有用。
}

您需要了解他们使用的浏览器，然后在该浏览器中进行设计。您可能会发现它运行的是嵌入IE7的WindowsXP

为了便于使用IE7，我建议设置一个运行浏览器的虚拟机。您可以在这里从Microsoft获得此信息：，或者，如果您使用的是OSX或Linux，那么这个令人惊讶的工具可能会很方便

值得仔细考虑的是，可读的最小字体大小是多少。您还可能会发现，如果是已旋转的普通屏幕，则子像素将旋转90度，也就是说，它们将垂直排列，而不是从RGB向左向右排列。在这种情况下，微软的Cleartype看起来很奇怪，所以如果打开它，你会发现较小的文本非常模糊。（它对左右像素起作用，而不是上下像素，因此旋转屏幕会使其大幅下降）

我会试着得到一个屏幕的副本，或者只是在你的电视上运行它，然后把头转向一边以接近它：）

你不应该有很多问题，只要将你的高度设置为1280px，宽度设置为720px

一个好的模板是：

<!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>


#包装纸{
高度：1280px；
宽度：720px；
轮廓：1px黑色实体；//在设计屏幕边界时非常有用。
}

您需要了解他们使用的浏览器，然后在该浏览器中进行设计。您可能会发现它运行的是嵌入IE7的WindowsXP

我会试着拿一个屏幕的副本，或者只是在你的电视上看一下，然后把头转向一边，以接近屏幕：）

问题1,3：为自己购买firefox的“Web开发者”插件。在工具栏中，在“调整大小”下选择“编辑调整尺寸”并添加“宽度：720，高度：1280”。现在，您可以单击resize，查看您的设计在所需屏幕分辨率下的外观

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

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

它会将“纵向”或“横向”类添加到页面的“主体”元素中。现在，您可以在CSS规则前添加此类，以进行条件设计。

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

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

它会将“纵向”或“横向”类添加到页面的“主体”元素中。现在，您可以将该类预先添加到CSS规则中，以进行条件设计。

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

挑战

确保内容完全符合分配的空间（空白空间在这样的显示器上看起来很糟糕，当然也会溢出）
处理可能较旧的浏览器（正如@Rich Bradshaw所指出的）和普通的CPU/GPU
典型桌面显示器和较大显示器之间像素密度的差异
色温/解释和字体呈现差异

可能有帮助的事情

我的第一步是看看你是否可以把一台设备作为租借者提供给你进行测试。我与不止一家公司合作过，他们很乐意在有特殊要求时租借/提供设备。如果你负责视觉设计的任何部分，这一点尤其重要（例如，确保颜色不流血、字体平滑等）
如果你不能得到一个实际的设备，至少看看它是否校准到一个特定的颜色配置文件，然后你可以在你的本地机器上设置它（在Windows中，它在“颜色管理”下）
如果内容是静态的，那么很容易组合一个固定维度的布局，甚至可以在较旧的浏览器上工作
如果内容本质上是动态的，您可以尝试类似这样的内容，以适应不同的环境