I'm working on a PWA which I have to resize dynamically, depending on different conditions. In one of the cases the width of the app should be 300px. Unfortunately, window.resizeTo(width, height) can't shrink the app window to less than 500px in width. The only way I found to get a web browser window with a smaller width is through first creating it with window.open(), but in my PWA case I already have that standalone window, so this doesn't help. Any other ideas? Thanks!
Related
RE-EDIT:
I am in the process of making a 1 page site. This is for a school and will only be accessed internally (like a page for different links that staff can quickly use to navigate to).
However sometimes staff have different sized windows open, when they open IE (it will auto re-direct them to my HTML page) is it possible to make sure they open it as 100% width and height?
Thanks,
Nick
Ya you can have width and height to take up 100% space but it is not easy to design a page like that for all resolutions. As you have to exapnd and shrink content both in height and width it becomes complex.better have a fixed width and have height according to the resolution(Again a problem with retina display). Here are some browser statistics- Link.
you are concerned about your page on different resolutions of desktops and laptops. But the bigger problem would be mobiles and tablets as they do count for quite a lot of web-traffic.
Better way of handling the problem is to go with responsive design and target 2560×1600 and above 1366x768 for desktops and few mobile and tablet resolutions.
Here is a link for responsive design resourses- resourses
Liquid design isn't too difficult.
If you mean you want your page to open in a new tab or in the same already maximised tab, search for that; SO has that covered already.
Don't worry about height. Just make it fill the width and let the user scroll.
I have a web app that needs to be within a container of a fixed size. I want that container to always be completely visible on the screen of mobile devices. (Particularly I care about iPads.) In my case, the container is 1000px wide by 650px tall. Essentially, I need something that would be the functional equivalent of <meta name="viewport" content="min-width=1000, min-height=650">. But min-width and min-height aren't valid in a viewport meta tag.
I already have the page laid out such that if the window or viewport has extra room the content is displayed centered on the page. I've tried using the orientationchange event to change the content attribute of my meta tag, but no luck. With some configurations that I've tried it loads correctly initially (sometimes, refreshing or reopening the page often yields different results) but upon changing orientation it becomes incorrect.
This is the closest I've come to getting it to work (in the window.onOrientationChange event):
var mvp = document.getElementById('myViewport');
if(window.innerWidth / window.innerHeight > 1000 / 650) {
mvp.setAttribute('content',"user-scalable=yes, height=650");
} else {
mvp.setAttribute('content',"user-scalable=yes, width=1000");
}
Where of course #myViewport is my viewport meta tag. This works correctly in portrait (although when switching back and forth I have to manually zoom back out,) but doesn't add the extra width needed to zoom out to see the full app height in landscape. Also, I'd prefer not to allow users to zoom in and out because of the nature of the app, and certainly don't want to require them to zoom out every time they change orientation.
If there is a way to force the zoom to always fit to screen, something akin to minimum-scale=auto, maximum-scale=auto, it seems like that would work (if I could get the width correct in landscape,) but I don't know of such a mechanism. I also tried using javascript to determine the scale, based on window.outerHeight or window.outerWidth depending on which one is the determining factor, but that wasn't successful either.
And please don't tell me that this is bad design, because the specs come from the client for their internal-use app and there's nothing I can do about them.
In javascript, window.open() with width=500 height=500 open a new window with page size(the area in which the html is displayed) of 500 by 500. But the size of the whole window is larger (width and height in the picture, depends on theme,operating system etc...)
Our system needs to use window.open() in different environments (OS's, themes...). In each environment the window needs to open in max size so it covers the whole screen and only the taskbar is not covered.
In order to do so, I need to be able to find the size of the extra controls(all the aero glass and buttons ). If I had the width and height of whole window, I could substract from it the page size. Is there a way to get those values (height and width of the whole window) ?
if I understand good, you can find the extra space with:
window.outerHeight - window.innerHeight
You could use screen.height;andscreen.width; to get the full scrren resolutions or screen.availHeight to get the height of the visitor's screen, in pixels, minus interface features like the Windows Taskbar.
For information about window.height and sreen.height see the post from jigfox.
I need to have my site fit exactly to the user's browser, this means any browser and any size of monitor. i need to have no scroll bars both vertical and horizontal
I want to do this in javascript/jquery
I have this code:
screen.width
screen.height
i also tried jquery :
$(window).height()
$(window).width()
also had scroll bars.
Is this the only way?? cuz when i used it on my site, i had scroll bars both vertical and horizontal. it was to big.
Can any one please help?
It's impossible.
No way you'd be able to fit your content to all display resolutions (think ipads, smartphones [each with different resolutions], 30" monitors, etc).
by the way:
// both of these on their own do nothing.
$(window).height() // just returns to you the viewport height
$(window).width() // just returns to you the viewport width
body {height: 100%; width: 100%;}
div#page_container {height: 100%; width: 100%;}
No need for JS/jQuery, just wrap all your content inside <div id="page_container"></div>
It also resizes with people resizing browser windows.
I have to agree with Phil. There is going to be no way to determain the resolution of the users screen. That is going to be a user problem. I have always built my web sites at 1024 x 768 resolution for that reason. Sometime even lower depending on the content, and the target audience(sites that target older people who probably have a low resolution setting so they can read their screen).This way, I know that my stuff will fit. Most people now a days, with monitors the size that they are, do not go much below that.
I found this code here at http://support.microsoft.com/kb/287171 that might help you though. This will adjust the screens height and width based on the users screen resolution.
Also remember that some JavaScript will not work in certain browsers. I have run into this problem with pop-ups when it came to changing screen size, scrollbars ect...
im using 960 and i want to adjust the nr of columns depending on the user's screen size.
how do javascript/jquery get the resolution of the screen?
screen.width will tell you the screens width. Or maybe screen.availWidth would be better. Note also that with jQuery you can get the $.width() and $.height() of items: $(window).width() for instance will tell you how wide your window is.
I would argue that screen size doesn't matter. What matters is how wide their viewport for your page is. They could have a 3000px across screen, but be viewing your page with only 1000px wide browser window.
In jQuery you can get the viewport width like this:
$(window).width()