I'm trying to detect the actual monitor resolution or size using either JQuery or JavaScript, the screen.availWidth or screen.width seem to work in all browsers except for firefox and explorer...
If the window is maximized it will get the information but if the window was scaled down or even zoomed it doesn't give the monitor resolution but looks at the window instead...
I've gone through several posts on here but haven't found anything and I think most of them are not stating the fact that the window size might not be maximized or zoomed when getting the wrong type of information...
I'm hoping there's a solution I'm missing, thanks ahead for any help ;)
JavaScript var x = "Available Width: " + screen.availWidth;
With jQuery:
$(window).width();
$(window).height();
Related
I would like to get the dimensions of the monitor. I would also call that the screen size, but apparently, that is not the same.
I have tried:
screen.width
screen.height
screen.availWidth
screen.availHeight
globalThis.screen.availWidth
globalThis.screen.availHeight
The thing is, all of these change when I change the browser window size. The monitor (screen?) does not. It is hardware.
Surely the OS knows the monitor's size. Surely it would be trivial to make that information available through JavaScript.
The reason I need this is that I am trying to determine if they are on a desktop, tablet, or mobile device. The size of their browser window is irrelevant.
Thanks for the help!
I found the problem. screen.width and screen.height do, in fact, return the monitor size. These numbers do not change when the browser window is re-sized. And there is no privacy issue around this. The problem is a bug in the Brave browser.
I have a popup on my site. After the popup opens, I resize it to take up most of the screen:
jQuery( window ).resize(function() {
var windowHeight = jQuery(window).height();
jQuery('#BookingFrame').css('height', windowHeight * 0.9 | 0);
});
Problem: On iPad, the window resizes past the viewport and the bottom half of the popup disappears. There is literally no way to complete the form on an iPad.
I've seen a lot of explanations on here about the "why" but I have not been able to find a workable solution. Any changes suggested in these forums results in breaking another part of the page or site on other devices.
I'm thinking I need to identify the device ($device==iPad) and then change the windowHeight to windowHeight * 0.5 or something similar. Is this the best solution? or is there something simpler?
Depending on what browsers you need to support you could use vh units instead of px/rem/% so you eliminate the need for js to resize the popup.
I'm sure this is the working as intended, but I find it kind of a pain.
In Chrome (and probably other browsers)
Generally, window.innerHeight gives me 801 (for example).
If I have a console open along the bottom half of my screen (going horizontally), this changes my window.innerHeight. If I've downloaded something, this pops up a bar at the bottom of the window and also changes window.innerHeight.
I don't having the dev tools open to make my site feel broken.
Is there a different measurement to use in javascript to ignore UI?
I don't want outerWidth, because this includes window tab heights and they won't be consistent cross browser.
I essentially want the height to be consistent whether or not there are any chrome ui elements present.
I don't think you can get exactly that number! The closest you can get is calculating the available height, minus os taskbar and such by using:
window.screen.availHeight
Which MDN says:
Returns the amount of vertical space available to the window on the
screen.
I made a jsfiddle to try it in here
MDN availHeight article
I'm currently trying to use JavaScript to find out how far down the page the user has scrolled; for Firefox 8.0, the keyword is pageYOffset.
To say things mechanically:
The page has a certain height. In Firefox, the useful object is document.documentElement.scrollHeight.
The browser's visible area also has a certain height. In Firefox, the object is window.innerHeight; in IE8, document.documentElement.clientHeight.
I need to know where the user is in the page vertically; in other words, how many pixels down the page the user has scrolled.
Does Webkit have a DOM object that refers to the current scroll position?
Thank you.
I think all you need is:
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrolLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
The first half covers webkit and mozilla, the latter for IE.
Ah, there's the IE problem solved.
Also, it turns out that in the case of Chrome and Safari, as well as IE, the scrollbar is brought back to the top for a split second when the page is reloaded.
The window.onload event which I used for testing was called before the bar was brought back to the right position.
Thank you, I was worried about what I was going to do with IE.
I am creating a simple popup window and the window height will not resize to 30 pixels. It always defaults to 100 pixels. This behavior appears in all browsers. Am I missing something?
var myWindow;
function openWindow(url)
{
var windowFeatures = "width=530,height=30,status,resizable=no,scrollbars=0";
myWindow = window.open(url, "welcome", windowFeatures);
}
Here is my link
<a href='javascript:void(0)' onclick=openWindow('http://www.stackoverflow.com')> Open the window </a>
No, this is just the way it works. The "features" that you pass in to window.open are simply requests, and the browser is free to ignore any or all of them. Most browsers and/or the underlying OS itself impose a minimum width and height for windows -- there is nothing you can do to alter this via JavaScript.
Most browsers set a minimum window size around 100px so malicious users don't go making tiny windows from which to do lousy things. Even a well-intentioned window of sufficiently small size could become difficult for a user to find and close.
Maybe a lightBox or simpleModal type solution would be helpful? You'd have more control over the size of the display area.
Ok after a bit of tinkering I forgot about using the resizeTo() method. Can't believe I did not think of this earlier. (Wasted 2 hours)