Develop Reference

How can I determine zoom level in IE 11?

I'm trying to programatically determine the zoom level in IE 11. Researching this, I've seen that Chrome and Firefox report the "actual" window.outerWidth independent of the "zoomed" window.innerWidth values - allowing for a calculation to determine zoom level. But IE 11 reports both values as having changed (outerWidth also changes when zoomed). Is there some object in IE that can be queried for "actual" window width? Or perhaps some trick to create an object that doesn't zoom when the page does? I just need something reporting dimensions independent of the zoomed content.

So I decided to just use a transparent png with a fixed px width in comparison to window width, should serve my purpose.

firefox top document position from top of screen

I'm working on a Firefox add-on.
I need to get the position of the current top document from the top of the screen.
Do you know if there is a solution for it ?
Or, if its not possible, the height of all visible Firefox tollbars, includig tabs bar ?
Thanks you very much
Regards

The following will give you the absolute offset to the top of the screen (in device pixels) of the <tabbrowser> that contains the website documents.
gBrowser.boxObject.screenY
There is also:
gBrowser.selectedBrowser.boxObject.screenY
which gives the same for the currently selected <browser>. It will usually yield the same value, unless some clever add-on adds some additional padding or other kind of spacing.
boxObject is a property of XUL-Elements and implements the nsIBoxObject interface.

Detect if the viewport width is bigger than the visible width on Mobile Safari using javascript

I have an element with position fixed (pinned to any corner) on a page (which I do not necessarily have control over the meta viewport tag - it is an embedded widget for third party sites). On Mobile Safari when the user pinch zooms the page at a certain point the viewport becomes larger than the visible area. At that point the fixed position element stays attached to the viewport and is not necessarily in the visible area.
I would like to compare two widths: the width of the visible area and the width of the viewport. I believe the size of the visible area is window.innerWidth. I am not sure how to measure the viewport.
I have been trying to see the relationships between:
document.documentElement.clientWidth
screen.width
window.innerWidth
window.outerWidth
...But have not been able to see anything obvious.

This is butt ugly but it does show some code that almost works (view on iOS to see it working. Use a desktop and click edit at top right of page to see or edit code):
https://jsbin.com/jopamu (iOS only)
The trick with the "overzoom" calculation is nasty but it does compensate somewhat for the multiple viewport zooms. It is a complex problem to solve because there are competing issues:
pinch-zoom
zoom due to input focus
the "position:fixed" zoom
potentially the OS (accessibility) zoom
The possible solutions I have found are:
Position the menu using the calculations above and position:absolute - updating the left/top in onscroll event. Has ugly juddering (can improve a little by hiding and only showing when zooming/scrolling finishes).
Position the menu using position:fixed but change the left/top to correct the menu position as zooming/scrolling occurs. Much less judder but I couldn't quite get it 100% reliable (some race condition).
Not suitable for your case (and highly unrecommended due to risk of breaking things): you can prevent pinch zooming and iOS10 double-click zooming by cancelling default on touchstart. Difficult because it needs many other workarounds so normal touch works, and needs synthetic scrolling and zooming (but has ugly side effects such as preventing scrolling working sometimes and also interferes with accessability e.g. if voice accessability turned on etc etc).
If you just want to see the widths then use the older version:https://output.jsbin.com/jopamu/6

Trying to position div at bottom of mobile viewport, not bottom of browser

I've got a div that I want to position at the bottom of the mobile browser (Safari + Android) viewport. Currently my div is fixed at the bottom on all the top 5 browsers on Windows (IE, FF, Saf, Chrome, Opera), but that's "the browser window", not "the viewport".
On mobile devices (I've only tried on Samsung Galaxy Tab with Android 2.2 so far) the div appears at the bottom of the page, but if you pinch/punch to zoom in, the fixed div doesn't follow. It stays behind, outside of the viewport.
I'm specifically using the position:fixed and bottom:0 CSS properties to maintain the position, and as I said, it works fine on a non-touch browser.
Am I going to have to resort to keeping the div in the position I'd like it to be (at the bottom of the viewport) by hooking into the touchmove event and looking at (a) the zoom level, (b) the viewport position, and (c) the scroll position?
I'm using JavaScript to inject the div into the page rather than using inline CSS. The good thing is that I don't have to worry about quirks mode (as I'm only targeting Webkit browsers), so that's one positive thing.
I can't set doctype, use inline CSS or inline DIVs. Everything has to be added dynamically via JavaScript. Here's what I've done in my test so far:
var mydiv=document.createElement("div");
mydiv.style.position="fixed";
mydiv.style.bottom="0px";
mydiv.id="floater";
mydiv.style.width="400px";
mydiv.style.height="50px";
mydiv.style.backgroundColor="yellow";
if(document.body)document.body.appendChild(mydiv);
document.getElementById("floater").innerHTML="HELLO";

Your position:fixed won't work on mobile webkit browsers. Take a look at the mobile webkit fixed position problem on http://www.position-absolute.com/. They have a few ways of keeping something at the bottom.

Check out iScroll:
http://cubiq.org/iscroll-4
It seems to be one of the better options out there - definitely worth looking into.
I have used the previous version of iScroll but unfortunately there were a few things that didn't work to standard so we had to scrap the idea. However, the guys at Cubiq have just released v4 of iScroll which promises to fix a lot of the things that were issues in the previous version.
Best of luck!Dan

Javascript Window.Open Dimensions

I'm opening a new window from javascript using this code
window.open('index.htm', 'myWindow', 'width=1020,height=400');
However the window seems to be opening 10px too wide when measuring from outter border to outer border, I've only tested this on IE7 and IE8 so far. Does anyone know what could be causing this?

See the IE Blog for details on how Microsoft changed their window dimensions in IE7 (and beyond)
IE Blog: Why Does IE Resize My Dialogs?
Quotes:
IE6 gives web developers control over the frame size of dialogs (also known as the ‘chrome’). The frame includes visual elements such as the title bar, status bar, borders, etc. This is a problem for web developers because the dialog’s frame size varies according to whatever windows theme is applied (this is bad)...
In Windows XP Service Pack 2, IE’s security improvements added window restrictions that forced the status bar onto windows and dialogs (in certain security zones); developers adapted by subtracting the height of the status bar from their dialogs...
Before the guesswork for sizing the content area gets any worse for developers, we felt it was time to set things right by focusing on delivering HTML content area instead of total frame size.
Here’s how we changed it. In IE7, the meaning of window.dialogHeight and dialogWidth now refers to the content area. Essentially, the area (height/width) that you specify is what we try to deliver in the content area of the dialog (barring window restrictions on scriptable minimum sizes: 250px wide x 150px high*). It will no longer be necessary to calculate the area lost by components of a dialog’s frame.
Figure 3

window.onload=setTimeout(function(){window.open('http://www.w3schools.com', 'myWindow', 'width=920,height=400');},1000);