2

In HTML, is there a way to make a webpage expand to the user's monitor? Like say I have a 15inch, but someone else has a 24 inch. The webpage would be small on their screen, but would fit on min. How would I make the page expand to 100%, or maybe 95%?

4

8 回答 8

3

流体宽度是通过使用百分比单位或 em 单位来实现的。这一切都是关于基于网格和容器制作网站布局。 阅读更多。

于 2009-03-11T20:53:42.333 回答
2

Gumbo，“页面”是指网页内容还是包含该页面的窗口？如果你指的是窗户，答案是不要。如果您指的是内容，则可以使用流式布局；谷歌那个。

于 2009-03-11T21:23:16.070 回答
1

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

您可能会发现 Firefox 的 Web Developer 插件很有用，因为它可以让您快速将浏览器的窗口更改为特定的大小，以便您查看布局在不同大小下的外观。https://addons.mozilla.org/en-US/firefox/addon/60

于 2009-03-11T20:48:40.660 回答
1

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

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

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

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

于 2009-03-11T20:53:19.277 回答
0

在您的 html 中：

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

然后在你的CSS中：

#content {
    width:100%;
}

或更多控制：

#content {
    min-width:500px;
    max-width:1000px;
}
于 2009-03-11T20:49:38.973 回答
0

HTML 只是一种描述（文本）内容含义的标记语言。例如，<h1>Foobar</h1>just meanFoobar是一级标题，但没有说明它应该显示的样式。

为了设计 HTML 文档的样式，引入了层叠样式表 (CSS)。但是 CSS 也只是一种描述性语言，对用户代理一无所知。（您可以只描述特定元素应该以特定宽度显示，等等。）

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

于 2009-03-11T21:07:26.670 回答
0

我认为对于 Bob 是在询问显示器的实际大小还是窗口的大小存在一些混淆。

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>

希望有帮助。

于 2009-03-11T21:09:59.847 回答
0

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

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

对于那些使用 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 年），但还没有发现它，不客气！

于 2021-01-19T02:27:37.643 回答