Testing multiple screens with javascript

Question

Can I indicate if a website user is using multiple monitors? I need to find the position of the popup, but it is likely that the user will have several monitor settings. While window.screenX , etc. Indicate the position of the browser window, it is useless for multiple monitors.

Answer 1

This is too complicated a decision. I would highly recommend refactoring this - it was not used at the production site, but only as a “proof of concept” for myself.

Right, warnings.

At first I suggested that the user may not have settings with two monitors, but they may have a really large monitor, and therefore, in any case, you can use the same functionality.

 var newWindow, screenSpaceLeft = window.screenX, screenSpaceTop = window.screenY, screenSpaceRight = screen.availWidth - (window.screenX + window.outerWidth), screenSpaceBottom = screen.availHeight - (window.screenY + window.outerHeight), minScreenSpaceSide = 800, minScreenSpaceTop = 600, screenMargin = 8, width = (screen.availWidth / 2.05), height = screen.availHeight, posX = (screen.availWidth / 2), posY = 0; e.preventDefault(); if (screenSpaceRight > screenSpaceLeft && screenSpaceRight > screenSpaceTop && screenSpaceRight > screenSpaceBottom && screenSpaceRight > minScreenSpaceSide) { if (width > screenSpaceRight) { width = screenSpaceRight - screenMargin; } if (posX < (screen.availWidth - screenSpaceRight)) { posX = window.screenX + window.outerWidth + screenMargin; } } else if (screenSpaceLeft > screenSpaceRight && screenSpaceLeft > screenSpaceTop && screenSpaceLeft > screenSpaceBottom && screenSpaceLeft > minScreenSpaceSide) { if (width > screenSpaceLeft) { width = screenSpaceLeft - screenMargin; } posX = 0; } else if (screenSpaceTop > screenSpaceRight && screenSpaceTop > screenSpaceLeft && screenSpaceTop > screenSpaceBottom && screenSpaceTop > minScreenSpaceTop) { posX = 0; posY = 0; width = screen.availWidth; height = (screen.availHeight / 2.05); if (height > screenSpaceTop) { height = screenSpaceTop - screenMargin; } } else if (screenSpaceBottom > screenSpaceRight && screenSpaceBottom > screenSpaceLeft && screenSpaceBottom > screenSpaceTop && screenSpaceBottom > minScreenSpaceTop) { posX = 0; width = screen.availWidth; if (window.screenY + window.outerHeight + screenMargin > (screen.availHeight / 2)) { posY = window.screenY + window.outerHeight + screenMargin; } else { posY = (screen.availHeight / 2); } height = (screen.availHeight / 2.05); if (height > screenSpaceBottom) { height = screenSpaceBottom - screenMargin; } } newWindow = window.open(this.href, "_blank", "width=" + width + ",height=" + height + ",location=yes,menubar=no,resizable=yes,scrollbars=yes,status=yes,menubar=yes,top=" + posY + ",left=" + posX); 

It checks how much screen space is available, and if the minimum amount, if available (800 x 600), opens a window there. If there is not enough space, it overlays the window on the right side of the screen, occupying about half of it.

Notes:

First, it must be modified to find out where the maximum amount of space is, and not just arbitrarily search left, right, top, bottom.

Secondly, I suspect that in some places where screen.availHeight is used, screen.height should be used instead. Similarly for width. This is due to the fact that we are not too interested in where the taskbar is when you decide whether the user has a second monitor or not (or a lot of space on the screen).

Thirdly, it will not work in IE <8. This can be easily fixed using screenLeft and screenTop, rather than screenX / screenY, where necessary.

Fourth, the code is dirty and can be made to look much more elegant than it is. I do not apologize for this. However, you should NOT use such a terrible, irreplaceable JS anywhere, and its NEEDS should be rewritten. I just posted it here because it is in my mindset at the moment, and I will most likely forget to post a good solution here when I write it correctly, as this will not happen in a few months.

Right Like this. I do not accept responsibility for making your javascript horrible, ugly and absolutely hard to do anything. :)

Answer 2

I do not believe that this is possible right now; however js is becoming more and more popular for widget desktop applications in addition to web development, and it will be a great opportunity to request a future version

Answer 3

I found this as a solution that someone used ... I do not understand why you could not trust him.

[if the width is greater (Height / 3) * 4> (Screen. Width) THEN]

[User has a dual monitor]

[End If]

Answer 4

You cannot do this. However, you can position the popup on the parent window. I think it’s better to show the "div" dialogs in the middle of your website, because the likelihood of this pop-up blocking is less, and the IMO is less annoying.

Answer 5

What about screen size? Multiple screens are usually large. Just check the sizes and decide if it makes sense to be on one or more screens.

Answer 6

You can make a well-founded assumption with JavaScript screen.width ( .availWidth ) and screen.height ( .availHeight ).

My idea was to assume (!) That monitors generally follow a certain ratio, while the width [avail] should be outside it, because the screen is duplicated only in width but not in height.

By writing this answer, it sounds like a serious hack. Nothing I'd really rely on.