Question

在HTML中，有没有办法让网页扩展到用户的监视器？比如说我有15英寸，但其他人有24英寸。网页在他们的屏幕上会很小，但最适合。如何将页面扩展到100％，或者95％？

Answer 1

通过使用百分比单位或em单位实现流体宽度。一切都是基于网格和容器制作网站布局。 Read more

Answer 2

Gumbo，“页面”你的意思是网页内容，还是指包含页面的窗口？如果你的意思是窗口，答案是不要。如果您的意思是内容，您可以使用液体布局; Google那个。

Answer 3

除非您自己明确设置大小，否则页面将默认使用浏览器窗口的全宽。

您可能会发现Firefox的Web Developer插件非常有用，因为它允许您快速将浏览器窗口更改为特定大小，以便您可以看到布局在不同大小上的显示效果。 https://addons.mozilla.org/en-US/firefox/addon/60

Answer 4

除非您为网页的任何元素指定特定宽度，例如正文或某些包含div，否则它将扩展到浏览器窗口的宽度。

如果您要将像素大小设置为用户宽度，可以使用javascript动态设置宽度：

<script type="text/javascript">
var userWidth = screen.width;
var userHeight = screen.height;
</script>

但是，您应该使用更流畅的布局，它将使用百分比中指定的宽度自动展开（例如，使用CSS设置元素的宽度：width: 100%）

Answer 5

在你的HTML中：

<div id="content">
<!-- Some content in here -->
<div>

然后在你的css中：

#content {
    width:100%;
}

或更多控制：

#content {
    min-width:500px;
    max-width:1000px;
}

Answer 6

HTML只是一个markup language来描述（文本）内容的含义。例如，<h1>Foobar</h1>只表示Foobar是第一级标题，但不会告诉它应该显示的样式。

为了对HTML文档进行样式设置，引入了Cascading Style Sheets (CSS)。但CSS也只是一种描述性语言，对user agent一无所知。（您可以只描述特定元素应以特定宽度显示等等。）

但JavaScript确实知道用户代理。您可以使用screen对象获取屏幕的width和height或可用的viewport。

Answer 7

我认为鲍勃是否询问显示器的实际尺寸或窗口大小存在一些疑惑。

Josh Stodola和Rich Bradshaw提供了HTML / CSS答案，它使用百分比创建一个随窗口扩展的流畅布局。以下代码总结了这种技术，创建了两列，一列占当前浏览器窗口的80％，另一列占20％。当用户更改窗口大小时，列大小会更改。

<html>
<head>
<style type="text/css">
    #content1 {
        background: #CC0000;
        height: 300px;
        width: 80%;
        float: left;
    }
    #content2 {
        background: #00CC00;
        height: 300px;
        width: 20%;
        float: left;
    }
</style>
</head>
<body>
<body>

<div id="content1"></div>

<div id="content2"></div>

</html>

Rudd Zwolinski提供了寻找用户当前分辨率的答案。其他人已经发布了使用这种方法引起的潜在烦恼，但我不知道，也许你正在做一些关于分辨率大小的艺术陈述。以上是使用此方法的相同代码：

<html>
<head>
<style type="text/css">
    #content1 {
        background: #CC0000;
        height: 300px;
        float: left;
    }
    #content2 {
        background: #00CC00;
        height: 300px;
        float: left;
    }
</style>
<script type="text/javascript">
    var userWidth = screen.width;
    var userHeight = screen.height;

    function resizeContent()
    {
        document.getElementById("content1").style.width = parseInt(userWidth * 0.8);
        document.getElementById("content2").style.width = parseInt(userWidth * 0.2);
    }
</script>
</head>
<body onload="resizeContent()">

<div id="content1"></div>

<div id="content2"></div>

</html>

希望有所帮助。

Answer 8

在一个被标记为重复的单独线程中，它询问如何自动调整您已经响应式网站的大小以适应移动屏幕。它没有得到答案，从我在这里看到的，这个线程也没有回答这个问题。

由于我最近遇到了同样的问题，我将分享我的发现。

对于使用 HTML5 对其页面进行编码的用户，为了使您的页面“适合移动设备”，您必须添加以下代码：<meta name=viewport content="width=device-width, initial-scale=1">。有些人告诉其他人将其写为 <meta name=viewport content="width=device-width, initial-scale=1, user-scalable=yes">，但 user-scalable=yes 不是必需的或不需要的。我访问过的每个著名的操作方法站点，包括 W3Schools.org 站点，这些信息总是被忽略。你不需要它。

如果我将上面的代码从我的页面中删除，当我在我的手机上加载它们时，它们会自动调整大小以适应屏幕的宽度。然而，他们随后未能通过移动友好测试。如果我在我的页面上插入上面的代码，当我在我的手机上加载它们时，我必须手动缩小我的页面。这对我来说是不可接受的。它应该显示整个页面并让用户向上缩放，而不是相反。

我发现同时满足两者的解决方案是： <meta name=viewport content="width=device-width, initial-scale=0"> 我的网站不仅被验证为“适合移动设备”，而且还会自动调整大小以适应移动设备的屏幕宽度。

对于那些一直在寻找此解决方案的人（至少是在我看到此问题的某些日期后的过去 4 年），但尚未发现它的人，欢迎您！

>

如何让网页自动更改宽度？

8 个答案: