What I want
I want to know physical screen width and height using javscript
Why I want
I want it so that I can use it when a portrait screen device(like mobile phone) wants to have a video call with landscape device(like laptop). This way I can swap width and height constraints according to the other end of the call. So for mobile device I will send video in portrait mode and for laptop I will send it in landscape mode, by swapping width and height dimensions(constraints).
I would like to know a device original screen size or orientation irrespective of browser widow size change or device is orientation change.
I have already found many posts asking about orientation or dimensions but they all seem to have some flaws, according to the comments, and some don't address physical screen dimensions.
I have mentioned what I aim to achieve. Maybe there is a better way to achieve that.
Please help.
Thank you
You could use screen.height and screen.width properties in javascript to get the height and width of the user's screen in pixels (irrespective of the browser size).
> screen.width
2048
> screen.height
1280
This works with most browsers and certainly works with Chrome, IE, Safari, Firefox, Opera.
Use
window.height and window.width
Related
From the API name screen and from this DOC link, I would expect them to be actual screen size pixels.
https://developer.mozilla.org/en-US/docs/Web/API/Screen/width
But from the tests I've run so far, it seems they return CSS pixels.
360 for window.screen.width for my Galaxy A5 (both on Chrome and Firefox)
768 for window.screen.width for my iPad (both on Chrome and Safari)
Which are CSS pixel values.
QUESTION
Is this consistent across browsers? Can I trust I'll always get CSS pixel values?
I found the confirmation that it is in CSS pixels in the CSS spec.
https://drafts.csswg.org/cssom-view/#dom-screen-width
Scenerio : I have to develop a responsive website in Angular JS in which some componets are sized with CSS media query while others with Javascript/Angular.
The problem of difference between Screen and Browser Resolution Starts with devices having width 1600 and above. Actually some browser are having resolution less than the screen resolution while others are exactly same as screen resolution
I am on a Win 10 computer with 14inch Screen and having supported screen resolutions upto 2560x1440
I tried to find out the browser width for some standard resolutions and found the following result:
for Screens 1366x768 Browser Viewport Width : 1366px
for Screens with 1600x900 Browser Viewport Width : 1583px
for Screen with 1920x1080 Browser Viewport Width: 1519.2px
for Screen with 2560x1440 browswer Viewport width 1433px
Now the problem is that css and js both apply the element sizes according to Screen Size and not the browser size, which browser is unable to display properly because it has lower resolution than screen.
Please note : the problem of low resolution on browser is specific to some devices and not all having resolution and all. And this is same for all browser on that device. i.e chrome, mozilla, ie etc.
Edit :
And also i don't want to use Bootstrap and possibly Jquery. If possible please suggest an Angular JS /HTML/CSS approach.
I am developing an app for Firefox OS which should always work in portrait view so I locked the orientation by using
screen.mozLockOrientation("portrait");
It works well
But when I rotate the device though the orientation is always portrait the width and height property does not remain the same. There are certain divisions in my app for which the width and height is decided by javascript, based on width and height of the screen. The function to decide the size of divisions is run at app start and when I keep the phone rotated(landscape) during startup the height is taken as width and vice-versa. How can I lock width and height property of screen along with orientation lock?
Will I need to write a function which should check the device orientation first and then decide which one is the correct width and height based on orientation? Or is there an alternate way to lock the width and height properties like orientation lock?
The only way I found is a hack as shown
var widthToUse,heightToUse;
if(screen.width < screen.height){
widthToUse=screen.width;
heightToUse=screen.height;
}
else{
widthToUse=screen.height;
heightToUse=screen.width;
}
But this is only a hack. Isn't there any existing way to lock the width and height properties along with orientation lock?
use
"orientation": "portrait-primary"
in manifest.webapp file which makes the screen orientation to portrait permanently.
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 wondering how to get the page width/height and not the viewport's width and height.
I tried innerWidth/Height and outerWidth/height.
In order to get the complete width/height of the screen so i need to + the inner with the outer? Or os there some other way to get the complete page width/height for the 3 devices i mentioned in my title.
if you're using iphone or ipad's UIWebView, you can use this Javascript Code;
NSLog(#"%#",[webview stringByEvaluatingJavaScriptFromString:#"document.body.scrollWidth;"]);
NSLog(#"%#",[webview stringByEvaluatingJavaScriptFromString:#"document.body.scrollHeight;"]);
your scroll size is your full page size.
i dont have any idea about android or etc.