I have a monitor with 1920x1080 resolution for my laptop and a Surface Pro 3 with 1920x1280 resolution. I am developing a web page designed for full-screen viewing on 1920x1080 and 1920x1280 displays.
I have confirmed the settings for each display (see below).
Why am I getting 8xx instead of 1280? How can I obtain a value of 1280 to match the resolution height of the Surface Pro 3?
1920x1080 monitor (on Windows 8):
1920x1280 (Surface Pro 3) display (on Windows 10):
Using $(window).height() on my 1920x1080 monitor, I get the following:
That works for me.
However, using suggestions from this question for my 1920x1280 (Surface Pro 3) display...
Using suggestions from the accepted answer.
Using $(window).height():
Using $(document).height():
Using screen.height:
Using the suggestion from this answer:
Using the suggestion from this answer:
Using the suggestion from this answer:
Using the suggestion from this answer and this answer and this answer:
Using this suggestion from this answer:
This suggestion is a self-recommendation of a plugin. I will pass on this for now.
This suggestion uses a Coffee solution. I'll stick to JavaScript and jQuery for now.
Using this suggestion from this answer (which regurgitates a few other answers):
This suggestion requires an external library. I will pass on this for now.
Using the suggestion from this answer:
This suggestion was incorporated into a few other answers above.
It seems that your Surface Pro 3 uses an operating system wide zoom factor of 150%. Due to this the browser returns width 1280 and height 853 (as 1280 * 1.5 = 1920 and 853 * 1.5 = 1280). Switch Windows' zoom factor to 100% in Control Panel and your browser will return width and height as expected.
1) How can I obtain a value of 1280 to match the resolution height of the Surface Pro 3?
Have you tried
window.outerHeight
yet?
All I see in your test cases is the innerHeight.
That's only showing you what the browser will render(pixels will be zoomed, etc.. decreasing the available width you actually have)
2) Why am i getting 8xx instead of 1280?
Basically, browsers will zoom text/images/ etc.. to give a consistent experience across several resolutions.
Even though you are building it for a 1280 screen, you might only have 8xx pixels to your availability.
For more information about the pixeling I advice you read:
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Here is a solution that worked for me in Firefox, Chrome, IE11, and Edge. I don't have a Mac to test on but this should work there too. You need to factor in the device pixel ratio. Here is an example (JSBin):
var screenHeight = window.devicePixelRatio * screen.height;
This will give you the screen dimensions regardless of DPI of the device.
An important thing to note is that innerHeight (size of window without browser UI) and outerHeight (size of window with browser UI) are relative to the browser window. You should use those instead of screen.height if you want to know the size of the browser window.
In the browser, you deal with the abstraction of CSS pixels, not with physical pixels. The size reported to you is most likely correct (unless there is a weird browser bug at play), so the height of the window is 853 CSS pixels.
My advice would be to work with that size. Adjust your layout with media queries etc. Don't try to second-guess the browser; don't optimize for hardware specifics which browser vendors, and web standards, are actively trying to hide from you.
(I'll try to expand this answer later on, if I have the time. A proper explanation of the concepts is the length of a blog post.)
Related
I am trying to obtain the screen scaling on the client machine - the value in the image below. As you can see it's set to 150%.
I've tried window.devicePixelRatio, which returns 1.5 - which is what I want, but only if the browser zoom is at 100%. I am unclear how to get zoom level in a modern browser, which precludes me from getting accurate screen scaling.
Am I missing a simple way to obtain screen scaling?
P.S. This question doesn't solve anything because the ratio as the same as zoom, which makes it impossible to find the scaling. See example.
I googled this and got a quirksmode site that gives you your screen size. Pulling up the console I see that screen.width and screen.height are directly available from the window object.
I want to do the detection in pure JavaScript to get started. Can I use this property across all devices and browsers - mobile, tablet, PC and Chrome, Safari, IE, Firefox.
I don't care about the view port changing due to re-sizing etc. Just the actual size of the screen which does not change.
I was hoping there was a single property I could check across devices and browsers.
Here is some general info by wikipedia on responsive web design.
Take a look at Get the device width in javascript
Media Queries work in js too:
if (window.matchMedia('screen and (max-width: 768px)').matches) {}
Another way would be:
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
screen.width is the property your are looking for.
This is what worked for me after long hunch.
These attributes below provide responsive sizes based on new tab size.
window.innerWidth
window.innerHeight
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 have a web application that is being used by browsers on desktop, tablet and phone. A toolbar (made in HTML) when used on tablet and desktop needs to have buttons that are 16 x 16, and then 48 x 48 on phones. The reason for this, is that 16 x 16 comes up as a good size on the desktop and tablet, but too small on phones (iPhone 4/4s, etc). 48 x 48 is too big on desktop and tablet, but perfect on the phones we've tested.
How can I do the necessary detection for this using Javascript?
I imagine that detecting the physical screen size in inches or millimeters would be a good way to go. Is this possible from within the browser? I've seen some information about detecting screen resolutions in pixels, but to me that seems flawed because the resolution boundaries between phone and tablet are blurring.
What is the most reliable method for detecting a tablet from inside the browser?
We are testing using an iPad 2, Android tablet and the Android Emulator.
CSS3 media queries work well for identifying device-widths (meaning screen-width) and there are some interesting techniques for hooking into them with JavaScript that Jeremy Keith has been toying around with that he discusses in this post from his journal. The general idea is that he puts a non-rendering css rule inside the media query then retrieves that css value via JavaScript to determine which media query is in effect. This identifies the device width ranges which you can then draw conclusions from about what kind of device you're displaying on.
The media query solution is a good one, but in case you do not want to integrate CSS into the solution and as your questions stated, use JS (only), you should be able to use JavaScript to detect if the device is a tablet vs. a phone. This can be done by detecting the default orientation using window.orientation in combination with the ratio of screen width to height.
if (window.oriention == 0){ // this is the device's default orientation
if (screen.width > screen.height) //means default orientation is landscape
isPhoneFormFactor = false;
}
The logic is that the default orientation for a device who's width is greater than it's height is most likely a tablet and not a mobile phone device.
To make it even more accurate, you should calculate the ration of screen width to height and ensure it surpasses a certain threshold to make the assumption more accurate and allow you to add a bit more logic to be even more so.
Originally I thought that what I needed to know was what kind of device the web application was running on, and then I moved on to thinking that I needed to know the physical screen size of the device. I now think that it is actually the DPI of the device that is relevant.
On a low resolution device such as a desktop monitor (typically well below 150 DPI) or an iPad 2 (132 DPI), the 16 x 16 buttons is a good size, but on a high resolution device such as an iPhone with retina display (326 DPI), the 48 x 48 buttons are better suited because 16 x6 16 shows up way too small.
Using Modernizr with it's .mq() function for running media queries, you can determine the device's screen resolution with Javascript code.
var isHighResolutionDisplay = Modernizr.mq("screen and (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 250dpi)");
This page has a great list of many different devices and their pixel density.
I am looking to create a fullsize window using javascript but I am having difficulties trying to take the actual size of the window into account. I can get the resolution of the desktop but if I set the windows width and height to that value, it is not 100% correct as it does not seem to be taking into account the size of the border for the browser application itself. How can I calculate my target width and height to take the browsers application border into account?
So basically you want to mimic the effect of hitting F11? Check out [old dead link]
I want to warn you that it's a usability nightmare. Try to think of a better way to execute your design without going full screen. Messing with the user's system settings is a HUGE no-no, and changing browser dimensions/resizing windows definitely falls under that category.
To find out the windows height and width you can use the following:
window.innerHeight/Width -> All browsers but not IE
document.body.clientHeight/Width -> All browsers
document.documentElement.clientHeight/Width -> All browsers
More info here: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow