Set viewport width onload

Hey Sitepointers,
I’m trying to set the window width in IE to a specific size on page load, but its not working. Any thoughts?

`

`

If you look at that meta tag in the dev tools inspector has the content width been changed?

The meta tag has indeed changed. Perhaps I’m mistaken in how this function is supposed to behave? My intent is to have a client open a local html file from the desktop using IE. Once the browser opens the html file, I want to use Javascript to automatically size the browser window’s width to 1480px and display the scroll bar if vertical content goes below the fold.

Is the code I’m using completely off for what I’m trying to accomplish?

Here is he entire page (and its just for a demo, not production):

`


html, body, img {padding: 0; margin: 0;}
html, body {
width: 1480;
height: 2691px;
}
img {
width: 1480px;
height: 2691px;
}






`

The viewport meta tag has nothing to do with how wide your browser opens and only relates to mobiles and tablets anyway so will have no effect on desktop.

When you supply a width to the viewport meta tag you are saying render my content on a canvas of the specified width and then scale that content to fit the viewport of the device. In most cases that is a bad approach anyway and you want the viewport at device width and not a specified width as all devices are different.

You can’t force a browser window to open at a certain size (unless its a js ‘new window’ triggered from an existing window) and forcing a window to a certain size would certainly annoy most people as its not your choice how wide my browsers window should open.:slight_smile:

1 Like

Thanks Paul. I definitely understand both the general usability and UX concerns but in this very particular case the users have explicitly requested to view the page at the specified width.

I’ve seen javascript that sizes the browser window onload,but it targets both the width and height. The problem with this approach is that I’m only interested in explicitly setting the width, not the height:

`

`

Is there a way to change the height parameter to a percentage instead of an exact pixel measurement, or just omit the height parameter altogether?

I’m assuming the goal is more to ensure a good image viewing experience than it is to hijack the browser.

IMHO the easiest way would be to put the image in a container and give it
overfow: auto or overflow: scroll

Possible problems being “auto” might cause scrollbars to to appear ↔ disappear resulting in re-flow “jumps”
and “scroll” might have scrollbars all the time whether needed or not.

But that’s a CSS thing that others would be better at addressing than I

Did they also specify how many flying pigs they wanted to use to hold the viewport open at the desired size?

1 Like

lol A very poetic way of saying “don’t hijack the browser”

If there is a problem with users being able to see the image full-size, that should be fairly easy to solve.

If it is that the site owners want to force visitors to see the image as the site owners would prefer them to see it, that could be a problem.

Browsers have matured a lot since the days of the browser wars. Much of what might have been possible to do years ago is no longer possible

Forcing a visitor’s view-port size is one of those things.

Not to say that a page can’t be designed to allow different view-port sizes. But attempting to force a view-port size to fit the design is the wrong way to go about it.

Have you? That doesn’t work in modern browsers unless as I said you are popping up a new window from an existing page.

Please show an example where you have seen this working to make sure we are talking about the same thing? :smile:

The objective was to show clients a static website comp in the browser at the “optimum” size based on their analytics. The actual website will indeed be responsive and work in all browers and at all sizes.

Is the client request kind of silly? Maybe.

Do we intend to launch a public facing site where we’ve hijacked the browser and manipulated the user experience to our own dastardly ends? Seems like the ‘Best Practice Nazis’ here think so.

Paul, it does look like you’re correct about modern browsers as none of the code I’ve found while googling around seems to work anymore! :laughing:

Can they not simply maximize their browsers view-port?

That will not work if their screen is too small to display the optimal viewport size or is ten times bigger than the optimal viewport size.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.