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...
Related
I have almost always used $(window).width() to check the viewport width. It normally works for both browsers and devices. But for a website on which I need to show a particular splash screen if viewport width is less than 768px, this is not working. It gives correct width upto a point but below that it keeps giving 980px howsoever narrow I make the browser. There are a few particular conditions for this site:
This site was responsive in beginning (using bootstrap) but then made non-responsive. For this we removed viewport meta tag and set following rule in css that overrides its responsive widths:
.container{ width: 1170px; }
If I resize the whole browser i.e. the window that contains all browser tabs, then it does give correct width (less than 980px also, which is the desired behaviour), but if I use development tools and use the mobile layouts from there then width is never reported to be below 980px.
It would not have mattered that it worked on resizing only the main browser window, but the issue is that it is not working in devices as well. I added an alert and on mobile devices, again width is never alerted to be less than 980px.
Can someone please suggest some solution for this or explain why it is not working as expected?
I can't seem to find any authoritative source, but there are many pages that mention smartphones assume a website is 980px wide unless told otherwise.
Apple's developer site for instance says
The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-4. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different. See Supported Meta Tags for more on viewport.
Figure 3-4 Comparison of 320 and 980 viewport widths
(Incidentally, it was the iPhone which first did this, but other phones soon followed.)
So the solution is either to put
<meta name="viewport" content="width=device-width">
into the head (in your case, back into the head), or, acknowledge that the site is now not-responsive, and will not perform optimally on a phone!
I am trying to solve the problem of using Javascript to determine the width of my browser's "window". I'm aware different people can mean different things in this context so to be specific I mean the area in green as in this post.
I've read the first two replies to that post and a number of other stackoverflow solutions to this problem, none of which I could get to work: I am using Firefox 27.0.1 with the window maximised on a monitor that is 1920 pixels wide. The scripts says my viewport is 1536 pixels wide. I expected 1920 (or something close).
Based on what I have seen, it seemed to me the simplest solution in my case was this code:
<html>
<head>
<script type="text/javascript">
function onAfterLoad() {
document.write('<p>Your viewport width is '+window.innerWidth+'</p>');
}
</script>
</head>
<body onload="onAfterLoad();">
</body>
</html>
At the time of writing this code is here. This also says my viewport is 1536 pixels wide when I think it should be 1920.
Where am I going wrong please?
For me this problem is a result of browser zooming.
Try control+scroll wheel to see if this changes the results your are getting.
If so see How to detect page zoom level in all modern browsers?
Check your viewport meta tag. It should be:
<meta name="viewport" content="width=device-width,initial-scale=1" />
I think you should try with jQuery Dimension Functions. Rather dealing with Javascript functions.
Most basics are
$(window).width() (to get the width of browser)
and
$(window).height() (to get the height of browser)
Hope this helps.
Firstly:
Are you sure that's your viewport width?
Do you want to get the width of the browser window or the whole screen?
If you want to get the width of the whole screen that's impossible in JavaScript.
Secondly:
Try this to get the width of the browser window:
function GetWidth()
{
var width = document.body.clientWidth;
document.write('<p>Your viewport width is '+width+'</p>')
}
If you configure for example Microsoft Windows 7 to display text 25% bigger, then Firefox reports your screen to be 1/1.25 times it's actual size. Which is exactly 1536 for actual 1920.
(Even rectangles in a canvas are drawn 25% too big then. Been there, gone mad.)
Solution for windows 11 machines
Go to Settings > Display > Scale & Layout, and change it to 100%,
Afterwards you should see the screen resolution as your code output,
Note: this is not recommended because you will experience difficult text size to read.
Explanation
Some systems like windows scale the app viewport, this is because of screen nowdays have denser pixels per inch value, so text will be small.
To get a deeper understanding, imagine a typical laptop screen width 14 inch that has a 1920 pixels on width.
if you set the font to be 20px, then your text will have the following size:
text-size-in-inch = font-size-in-pixel * screen-width-in-inch / screen-pixels.
So if you do the math it will be :
text-size-in-inch = 20 * 14 / 1920 = .1458333... inch.
So it's really very small, thus systems tends to scale these screens by 125%, which is, in your case, your screen width will be = 1920 / 125% = 1536 px
Recommendation
You should adapt your code to work with any screen resolution
You code works well for me. It says 1600 (I've got a 1600 x 900 screen).
Is your browser maximised when you call the code?
Maybe your resolution is 1536 x something and you've got your screen stretched? I'd check it out in your screen settings. Another way to try it is to open Chrome and the Devtools and then resize the browser. It will show you the browser window dimensions.
I built a new .Net website which will fit nicely on 1200px width resolution.
The problem is that some of my users will browse this website with 1024px width.
Is there a way to fix this problem quick without changing all the design of the page? For example, to put some javascript that will do the trick.
Please keep in mind that the top banner of my site is 1200px wide, and I don't need to support less then 1024px resolution.
Thanks a lot.
It all depends on how 'properly' your web site was designed. You might need to change a few widths for the main containers (hopefully divs) and the whole content will reflow nicely.
However, if your website contains fixed widths for individual elements, or if there are some images / background images with fixed width, then you will have to amend them as well.
Relatively / absolutely positioned elements will need to by amended as well.
There is no silver bullet 'make my page look nice in smaller resolution', if that's what you're looking for.
I would use javascript. I'd check user's width with document.width, then use jQuery's css() element to change what's needed.
If you really don't need to support users with horizontal resolutions less than 1200px, then why not just let them have the horizontal scrollbars?
Wrap the whole structure of the site in a (div) container that has a min-width: 1200px and be done with it.
Otherwise, if you can't stomach some users having horizontal scrollbars and you really want to maintain the beauty of the site, then you really need to get out of your way and re-design the site in a way that it gracefully degrades in lower resolutions. It definitely is not easy but it can be beautiful.
Here's an article from alistapart that discusses the techniques involved.
You can use the following CSS:
min-width:600px;
max-width:2000px;
this code will set the webpage to all resolutions between 600px to 2000px.
I feel like GMail is an excellent example of best practices in action, but I'm looking for a more theoretical code-based approach. CSS? JavaScript? jQuery? Let's hear it.
Most web application use proper document layout and CSS to make the flow work itself out naturally when the user resizes the browser window, without executing any script at all. This is exactly what the CSS properties display, position, float, clear, etc. are for.
Depends on what you have to do on window resize...
Usually most applications and websites use browser resize event for changing layout or increasing/decreasing font size when user changes browser window size.
Check this article out...
you could do something like this.
The idea is you make a large wrapper (#main,the lightest one) and you place 2 divs inside:#left and #right.
left is a fixed width div width:200px and floats left float:left.
right is liquid so no width, but to prevent #left from overlapping you give #right a margin of the width of #left -> margin:0 0 0 200px.
To prevent #right from being to small you give it a minimum width min-width:400px. Now when you resize the window #right will resize along until #right gets at 400px then the scrollbars will be visible
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()