How to detect the screen resolution with JavaScript?
original answer
Yes.
window.screen.availHeight
window.screen.availWidth
update 2017-11-10
From Tsunamis in the comments:
To get the native resolution of i.e. a mobile device you have to multiply with the device pixel ratio:
window.screen.width * window.devicePixelRatio
andwindow.screen.height * window.devicePixelRatio
. This will also work on desktops, which will have a ratio of 1.
And from Ben in another answer:
In vanilla JavaScript, this will give you the AVAILABLE width/height:
window.screen.availHeight
window.screen.availWidthFor the absolute width/height, use:
window.screen.height
window.screen.width
How to get the real screen size(screen resolution) by using js
Screen Resolution ≠ Window width
most os changing screen dpi so screen.width mostly return screen size with os dpi for for example my screen resolution is 1920x1080 and windows defult dpi is 125 so js screen.width return 1600px
use this:
function getResolution() {
const realWidth = window.screen.width * window.devicePixelRatio;
const realHeight = window.screen.height * window.devicePixelRatio;
console.log(`Your screen resolution is: ${realWidth} x ${realHeight}`);
}
// test
getResolution();
// Your screen resolution is: 3840 x 2160
How to detect device's screen resolution on macbook?
well, after some research I realised, that there's no way to get physical characteristics of displays, and device pixel ratio won't show the real css-to-physical pixels ratio
Get screen resolution on a mobile website
You can perhaps use the screen
object:
var w = screen.width;
var h = screen.height;
Update - Try to use it with the window.devicePixelRatio
:
var ratio = window.devicePixelRatio || 1;
var w = screen.width * ratio;
var h = screen.height * ratio;
how to detect screen resolution in javascript
In your case, this would suffice:
<img src = "screenshot.jpeg" width ="100%" />
jsFiddle Demo
Of course this will only do what you want if body
is the same size as the viewport. This basically tells the browser that the img
should be just as big as its parent (in this case the body
).
Note: Javascript does not work the way you expect it. <script>
is an HTML element, that lets you embed scripts (Javascript mostly) into your document. You cannot change the HTML source with Javascript on the client side (like you can with PHP, Python, etc. on the server side). You can modify the DOM though.
How to detect screen size for responsive web design?
screen.width
is the property your are looking for.
Get the size of the screen, current web page and browser window
You can get the size of the window or document with jQuery:
// Size of browser viewport.
$(window).height();
$(window).width();
// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();
For screen size you can use the screen
object:
window.screen.height;
window.screen.width;
Detect screen resolution independently of page zoom level and Windows scale settings
This is an XY problem, OP doesn't want the screen resolution, but the one of the document.
Note for future readers.
There are chances that if you also are trying to get the actual screen resolution, you are yourself in some kind of an XY problem.
If what you want is sharp pixels, getting the actual screen resolution won't help you much.
Taking OP's example of a browser zoom of 75% itself scaled by the OS zoom at 150%, we get for a single white pixel,
- 1 white pixel x 0.75 => impossible to render. => anti-aliasing with surrounding pixels. So if we say that surrounding pixels were black, then we've now got a grayish pixel.
And this was only at the browser level... We still have to pass the OS zoom algorithm.
- 1 grayish pixel x 1.5 => impossible to render => anti-aliasing with surrounding pixels. And yet a new pixel, even farther from our original white.
The best we can do here is to set our canvas bitmap's size to the one reported by the browser. This way, only the OS zoom would kick in.
Note: You may want to try to detect high density screens a.k.a retina®, which are actually able to render pixels at sub-px level, in this case, you might try using window.devicePixelRatio as a general scaling factor, but remember to round it, since a floating scale would mean more antialiasing (no high density screen will ever use 2.3 pixels to render one px).
So to detect this document size, is an easy task, with multiple different ways of doing:
If you deal with hard-coded sizes in windowed mode, you can simply check for window.innerWidth
and window.innerHeight
when entering fullScreen:
Unfortunately, StackSnippets® iframe do not allow fullscreen mode...
// listen for the resize event
window.onresize = function() {
// if we are in fullscreen mode
if (document.fullscreenElement === canvas) {
// simply size our canvas to the reported innerWidth/innerHeight.
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
}
draw();
}
// in the fulscreenchange event
document.onfullscreenchange = function() {
// if we are exiting the fullscreen mode
if (!document.fullscreenElement) {
// set back to hard-coded values
W = canvas.width = 500
H = canvas.height = 200;
}
draw();
}
Fiddle.
If you want something more dynamic, you could also make use of CSS to let you know the actual size. Indeed, you can resize your canvas through CSS, as long as you remember to set its bitmap's size to the displayed size.
// listen only for the resize event
window.onresize = function() {
// set the canvas size to its own rendered size
W = canvas.width = canvas.offsetWidth;
H = canvas.height = canvas.offsetHeight;
draw();
}
/* target only when in fullscreen mode */
canvas::fullscreen {
width: 100vw;
height: 100vh;
}
/* windowed mode */
canvas {
width: 50vw;
height: 50vh;
}
Fiddle.
How to detect the screen resolution with JavaScript?
original answer
Yes.
window.screen.availHeight
window.screen.availWidth
update 2017-11-10
From Tsunamis in the comments:
To get the native resolution of i.e. a mobile device you have to multiply with the device pixel ratio:
window.screen.width * window.devicePixelRatio
andwindow.screen.height * window.devicePixelRatio
. This will also work on desktops, which will have a ratio of 1.
And from Ben in another answer:
In vanilla JavaScript, this will give you the AVAILABLE width/height:
window.screen.availHeight
window.screen.availWidthFor the absolute width/height, use:
window.screen.height
window.screen.width
Related Topics
Bootstrap and Jqueryui Conflict
The Purpose of Starting an Initial Comment with /*! in JavaScript and CSS Files
Jquery Select Pseudo-Element :After
Add CSS Styled Marker to Google Maps
How to Reliably Get Screen Width with the Scrollbar
Get Element Stylesheet Style in JavaScript
Jquery Add Class Based on Page Url
Convert JavaScript-Generated Svg to a File
Iis 7.5 No Images CSS Js Showing
How to Toggle Class Using Pure JavaScript in HTML
Most Elegant Way to Force a Textarea Element to Line-Wrap, *Regardless* of Whitespace
Getelementsbyclassname to Change the Style of Elements When Event Occurs
Convert CSS Width String to Regular Number
How to Stop User from Printing Webpages? Using JavaScript or Jquery
IE9: Why Setting "-Ms-Transform" Works from CSS, But Not with Jquery.Css()