CODEWITHSUNDEEP
htmlexpandliquid-layout
Bob
Bob

Reputation:

How do you make a webpage change its width automatically?

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%?

Upvotes: 2

Views: 17774

Answers (8)

Media Fire
Media Fire

Reputation: 11

In a separate thread that was labeled as a duplicate, it asked how to automatically re-size your already responsive website to fit mobile screens. It didn't get an answer, and from what I can see here, this thread doesn't answer the question either.

Since I recently went through the same issue, I will share what I discovered.

For those using HTML5 to code their pages, in order for your page to be 'mobile friendly' you must add this code: <meta name=viewport content="width=device-width, initial-scale=1">. Some people are telling others to write it as <meta name=viewport content="width=device-width, initial-scale=1, user-scalable=yes">, but the user-scalable=yes is not necessary or needed. Every reputable how-to site I've visited, including the W3Schools.org site, that information is always left out. You don't need it.

If I leave the above code off of my pages, when I load them on my mobile, they automatically resize to fit the width of the screen. However, they then fail the Mobile-Friendly Test. If I insert the above code on my pages, I have to manually scale my pages down when I load them on my mobile. This was unacceptable to me. It should show the entire page and let the user scale upward, rather than the other way around.

The solution I found that satisfies both is this: <meta name=viewport content="width=device-width, initial-scale=0"> Not only does my site validate as 'mobile friendly,' but it also automatically resizes to fit the screen width on mobiles.

For those who have been searching for this solution for a while (at least the last 4 years from some of the dates I've seen for this question), and have yet to discover it, you're welcome!

Upvotes: 0

Jon Davis
Jon Davis

Reputation: 6773

Gumbo, by "page" you do you mean web page contents or do you mean the window that contains the page? If you mean the window, the answer is DON'T. If you mean content, you can use liquid layouts; Google that.

Upvotes: 2

attack
attack

Reputation: 1523

I think there's some confusion about whether or not Bob is asking about the actual size of the monitor or the size of the window.

Josh Stodola and Rich Bradshaw offered the HTML/CSS answer, which uses percentages to create a fluid layout which expands with the window. The following code sums up this technique, creating two columns, one taking up 80% of the current browser window, and the other taking up 20%. The column sizes alter when the user changes the window size.

<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 provided the answer which looks for the user's current resolution. Others have already posted the potential annoyances caused by using this method, but I don't know, maybe you're making some artistic statement about resolution sizes. Here's the same code above using this method:

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

Hope that helps.

Upvotes: 0

Gumbo
Gumbo

Reputation: 655835

HTML ist just a markup language to describe the meaning of (textual) contents. For example, <h1>Foobar</h1> just means Foobar is a first level heading but doesn’t tell anything about the style it should to be displayed.

For styling a HTML document the Cascading Style Sheets (CSS) has been introduced. But CSS is also just a describtive language and doesn’t know anything about the user agent. (You could just describe that specific elements should be displayed with a specific width and so on.)

But JavaScript does know the user agent. You could use the screen object to obtain the width and height of the screen or the available viewport.

Upvotes: 0

Josh Stodola
Josh Stodola

Reputation: 82523

Fluid-width is achieved by using percentage units or em units. It's all about crafting a site layout based on grids and containers. Read more.

Upvotes: 3

Rudd Zwolinski
Rudd Zwolinski

Reputation: 27611

Unless you specify a specific width for any element of a webpage, such as the body or some containing div, it will expand to the width of the browser window.

If you're looking to set the size in pixels to the user's width, you can use javascript to set widths dynamically:

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

However, you should probably use a more fluid layout that will automatically expand by using widths specified in percents (e.g. setting the width of an element with CSS: width: 100%)

Upvotes: 1

Rich Bradshaw
Rich Bradshaw

Reputation: 73055

In your html:

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

Then in your css:

#content {
    width:100%;
}

or for more control:

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

Upvotes: 0

Steve Claridge
Steve Claridge

Reputation: 11100

Unless you explicitly set the size yourself, a page will default to using the full width of a browser window.

You might find Firefox's Web Developer plugin useful as it allows you to quickly change your browser's window to specific sizes so you can see how your layout looks at different sizes. https://addons.mozilla.org/en-US/firefox/addon/60

Upvotes: 1

Related Questions