Html 在Web应用程序中支持屏幕大小的最佳方法是什么？
定义web应用程序页面宽度的最佳方法是什么？我们的大多数用户都有19英寸的显示器，但许多用户使用14英寸的笔记本电脑运行应用程序，有些用户使用24英寸的显示器（假设是最大分辨率）。据我所知，最常用的两种方法是：使用固定宽度页面或动态（最大）宽度（100%） 这两种方法都存在问题。如果一个页面是为14英寸笔记本电脑而优化的固定宽度，那么在更大的显示器上会有大量的空间被浪费（例如，即使屏幕的30%左右是空白的，用户也必须向下滚动才能获得内容）。我曾经是动态宽度的支持者，直到我开始看到页面，在24英寸显示器上显示的14英寸和19英寸屏幕上看起来都很棒（主要问题是右对齐的项目，如按钮，它们与主要内容分离） 理想情况下，我希望页面宽度是动态的（100%），直到它达到一定的阈值（比如600px）。这可能吗？有更好的选择吗Html 在Web应用程序中支持屏幕大小的最佳方法是什么？,html,user-interface,usability,Html,User Interface,Usability,定义web应用程序页面宽度的最佳方法是什么？我们的大多数用户都有19英寸的显示器，但许多用户使用14英寸的笔记本电脑运行应用程序，有些用户使用24英寸的显示器（假设是最大分辨率）。据我所知，最常用的两种方法是：使用固定宽度页面或动态（最大）宽度（100%） 这两种方法都存在问题。如果一个页面是为14英寸笔记本电脑而优化的固定宽度，那么在更大的显示器上会有大量的空间被浪费（例如，即使屏幕的30%左右是空白的，用户也必须向下滚动才能获得内容）。我曾经是动态宽度的支持者，直到我开始看到页面，在24英寸
更新：只是澄清一下：我希望页面内容的宽度为100%，但在一定范围内，比如400px和900px（因此，用户将窗口调整为300px宽度后将看到一个水平滚动条，如果窗口调整为1000px宽度，则侧边将出现空白，但在400px和900px之间，内容将自动调整）。可能的？为div或table设置最大宽度的一种方法是使用CSS表达式
div#myDiv
{
max-width: 980px;
min-width: 980px;
width: 980px;
width: expression(Math.max(Math.min((document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth) - 20, 1000), 980)+'px');
}
<html>
<head>
<style>
div#contentDiv
{
max-width: 600px;
width:expression(document.body.clientWidth > 600? "600px": "auto" );
border: red 1px solid;
}
div#wrapper {width: auto; border: blue 1px solid;}
</style>
</head>
<body>
<div id="wrapper">
<div id="contentDiv" style="height:686px; border: solid 1px red;"></div>
</div>
</body>
</html>
div#contentDiv
{
最大宽度：600px；
宽度：表达式（document.body.clientWidth>600？“600px”：“自动”）；
边框：红色1px实心；
}
div#包装{宽度：自动；边框：蓝色1px实心；}
- 屏幕较小的人（只有手机，这种尺寸）习惯于缩小和滚动
- 大屏幕用户的浏览器窗口并没有最大化，因为随着宽度的变化，文本变得很宽，很难阅读
为您的用户设计，如果80%的用户使用的是大分辨率，请对此进行优化。Google Analytics将为您提供有关访客浏览器分辨率的准确统计数据。我的统计数据显示1024x768位于顶部。这就是为什么我在我的应用程序中使用960px的宽度。 当统计数据更改时，我将此值更改为其他值
对于移动用户，您应该使用不同的视图，针对特殊情况进行优化。我们只说这是可能的，但在Internet Explorer中不行。）我不确定我是否理解。如果用户在查看分布在高分辨率24英寸显示器上的网页时遇到问题，如何阻止他们将浏览器设置为不使用整个屏幕？为什么要剥夺用户的控制权？这通常被认为是一件坏事。这是一个正确的观点，但原因如下。这是一个web应用程序，因此用户可能会ly在新的浏览器选项卡中打开它。可能用户已经查看了其他内容丰富的站点（如新闻等）这在全屏或大窗口下都可以正常工作，所以现在用户需要调整浏览器的大小，以使这个应用程序看起来更漂亮。如果页面自动调整到指定的最大宽度，这将更加方便用户。在这种情况下，使用JavaScript检查屏幕宽度，并在此基础上加载不同的样式表。CSS表达式用于最大宽度dth完全支持IE，而最大/最小宽度声明将用于大多数其他浏览器，如FF、Safari、Chrome、opera等。请参阅更具描述性的支持分类。嗯，可能我做得不正确，但似乎不起作用。在FF 3、IETab和IE 8中尝试过。在IE 8中，我会收到ActiveX警告，但即使我接受t他屏蔽了内容，它似乎没有达到我想要的效果；它只是将宽度设置为一个常量。我在FF中没有看到警告，但行为是一样的。根据您的反馈和澄清，我添加了一个带有HTML的更新、简化的代码段。它已经在IE 7、8、Chrome和Firefox中进行了测试。希望这有帮助。这看起来与我需要。唯一的问题是IE 8显示的ActiveX警告（如果用户不接受它，该功能将无法工作）。我假设该警告是由expres引起的