We Keep Coding

window.outerWidth is 0 in Safari on iOS 10 beta

Using an iPad with iOS 10 installed, I entered window.outerWidth in the browser console and got a value of 0. OTOH, window.innerWidth correctly produced 1024 (landscape mode).
In iOS 9, window.outerWidth correctly produced 1024, so is this just a bug in the iOS 10 beta or is there a subtlety to this property that I'm missing?

The issue is more than just the iOS 10 Beta, but I doubt it is a priority for Apple Devs to fix as iOS devices don't really have an external frame on the sides of their browser window, so window.innerWidth is the same as window.outerWidth.
To see this working in a different context, you can pop open the inspector in your browser and emulate a smaller device. The inner width will be equal to the page width, while the outer width will be equal to the full width of the open browser.
If you still need to use outerWidth, what you can do as an alternative is either check the screen width using:
let mq = window.matchMedia( "(min-width: 1025px)" );
mq.matches will evaluate to true if you're on a desktop, and you can then use outerWidth for desktop and innerWidth for mobile. Or you could just make an alternative function to do it for you like this:
let screenWidth = () => {
const mq = window.matchMedia( "(min-width: 1025px)" );
if (mq.matches) {
return window.outerWidth;
} else {
return window.innerWidth;
}
}
Note that 1025px is 1 more pixel wide than an iPad Air 2 in landscape orientation.

If you're using jQuery in your project, you can use $(window).outerWidth() and $(window).outerHeight(). It's a workaround that works as expected in all devices.

Turn off JavaScript when screen is a set size

How do I turn Javascript off when my page is viewed on mobiles?
I need a sort of media query that will disable all javascript on a page when viewed on a specific device.
So far I have this but do not know how to actually disable all javascript
if(screen.width < 480) {
// do any 480 width stuff here, or simply do nothing
return;
} else {
// do all your cool stuff here for larger screens
}
Thanks

You could use matchMedia.js (found at https://github.com/paulirish/matchMedia.js) and check if the screen is below a certain size.
Eg.
if (matchMedia('(max-width: 480px)')) {
// Run Code Here
}

You can check the
navigator.userAgent
property with Javascript. This will show the used browser and you can determine if its mobile or not.
Documentation:
userAgent Docs
You can do it also width the viewport width of your users browser in pure Javascript:
var w = document.documentElement.clientWidth;

How to debug mobile specific movement events (beta, gamma, alpha)

I was just going through the code of particles.js and came across the following lines of code:
if (orientationSupport && !desktop) {
// Map tiltX range [-30,30] to range [0,winW]
var ratioX = (winW - 0) / (30 - -30);
pointerX = (tiltX - -30) * ratioX + 0;
// Map tiltY range [-30,30] to range [0,winH]
var ratioY = (winH - 0) / (30 - -30);
pointerY = (tiltY - -30) * ratioY + 0;
} else {
pointerX = mouseX;
pointerY = mouseY;
}
The above lines of code can be found HERE.
Now this particular plugin uses these mobile specific events only for a tiny parallax.js, but I've seen plugins that use code similar to the above for really high tech parallax simulation.
Now my question is, because obviously these can't be tested on a destop PC, how do you test such code at all?

You can debug mobile Chrome with Chrome console on PC. Here is link how to connect it: https://developer.chrome.com/devtools/docs/remote-debugging

There are multiple ways:
Have a webserver which you and your mobile can connect to. If some JS doesn't work, check the console on your PC, it will mostly tell you every error you did.
#Andrew: use the remote debugging on google chrome
#choz: if you only need rotation you can just go into the dev-mode in google chrome [F12]
For other questions, it's worth to take a look at the device orientation API.

In chrome, you can use Toggle Device Mode by pressing Ctrl + Shift + M.
And taken from the doc, you are capable to:
Test your responsive designs by emulating different screen sizes and
resolutions, including Retina displays.
Evaluate your site's performance using the network emulator, without
affecting traffic to other tabs.
Visualize and inspect CSS media queries.
Accurately simulate device input for touch events, geolocation, and device orientation.
Enhance your current debugging workflow by combining device mode with the existing DevTools.
Edit:
You can change to various orientation mode according to your needs.

Change URL based on display width

I created a hobby site a few years ago that started as a convenient compact one-line-entry multi-search site. Later, I added various web tools, one-click radio stations, and other enhancements.
At first, I optimized for 1024x768 screens but tried to accommodate 800x600 screens. However, wide screen format is becoming dominant, so I decided it would be better to optimize things a bit by splitting the code, mostly, but not limited to, CSS changes, based on detecting a minimum 960 pixel width.
Screen widths less than 960 pixels wide redirect to a "mini.php" version.
The javascript code below selects the appropriate URL correctly if the web browser is already open. However, when initially opening a browser, the "mini" version is incorrectly selected regardless of the screen width. I tried delaying detection by using setTimeout() without effect.
var myWidth = 981
function vpWidth() {
return( myWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth );
}
vpWidth(); setTimeout(vpWidth,300);
if(myWidth<960) document.location.href="http://www.gooplusplus.com/mini.php";
Who can provide a solution that always works and not just when the browser is already open?

You're never actually setting myWidth. Also, I replaced your function with how jQuery gets the width internally.
function vpWidth() {
return Math.max(document.documentElement["clientWidth"], document.body["scrollWidth"], document.documentElement["scrollWidth"], document.body["offsetWidth"], document.documentElement["offsetWidth"]);
}
var myWidth = vpWidth();
if(myWidth<960) document.location.href="http://www.gooplusplus.com/mini.php";

Make your website responsive which will help you to cover more number of visitors to your size, as most of the people use their smartphone to browse websites nowdays.
http://alistapart.com/article/responsive-web-design

Further testing this width error upon browser startup showed that it seems limited to Chromium-based browsers where the target tab is not the active one. In such cases, Google Chrome took its window width results from the non-maximized window size even though the window was actually maximized.
Two detection steps were required on the way to a solution:
(1) is the browser Chromium-based? --> navigator.userAgent.indexOf("Chrome/")>0
(2) is the tab inactive? --> document.webkitVisibilityState == "hidden"
test URL: http://www.gooplusplus.com/chrome-bug.html
my working solution:
<script>
var myWidth = 981
var dde = document.documentElement;
var tabVisible = document.webkitVisibilityState;
if(!document.documentElement) dde = document.body; // fix for IE6 and earlier
myWidth = Math.max(dde.scrollWidth,dde.offsetWidth,dde.clientWidth);
if( ( navigator.userAgent.indexOf("Chrome/")<0 || tabVisible!="hidden" ) && myWidth < 960 )
document.location.href="http://www.gooplusplus.com/mini.php";
</script>
The above technique fixed the problem. Although the #theJoeBiz answer turned out to be irrelevant to the ultimate solution, his code was useful. I based my own new myWidth assignment code on his jQuery Math.max code, while noting that his code failed on my non-jQuery web page due to inclusion of pre-IE7 document.body variables (see fix in code above).

Detecting a retina display iPad with javascript

I'm having a problem detecting a retina iPad (and similar devices) using just screen.availWidth and window.devicePixelRatio. The problem is that iPhones and iPads give the number of dips for screen.availWidth whereas android devices seem to report the number of physical pixels so I can't reliably do screen.availWidth / window.devicePixelRatio to calculate if the screen is of a tablet size.
Is there some other DOM property I can use to help me?
edit - To sum up in a way which hopefully makes clear that the question isn't a duplicate
How can I tell if screen.availWidth reports a value that has already been adjusted to take account of window.devicePixelRatio

That should help
var retina = (window.retina || window.devicePixelRatio > 1);
UPDATE
Retina.isRetina = function(){
var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
(min--moz-device-pixel-ratio: 1.5),\
(-o-min-device-pixel-ratio: 3/2),\
(min-resolution: 1.5dppx)";
if (root.devicePixelRatio > 1)
return true;
if (root.matchMedia && root.matchMedia(mediaQuery).matches)
return true;
return false;
};

I haven't tested this, but here's an approach I think might work. I'll do a jsbin for it when I get time.
Because all devices (to the best of my knowledge) adjust for devicePixelRatio before passing the value to CSS media queries we can (in slightly pseudo code)
measure window.devicePixelRatio and screen.availWidth
Write a style tag to the head which includes a media query something like the following
#my-test-el {
display: none;
visibility: visible;
}
#media screen and (min-device-width:screen.availWidth) {
#my-test-el {
visibility: hidden;
}
}
Append <div id="my-test-el"> to the page
Read off the style.visibility attribute. If it equals hidden then the css value is the same value as screen.availWidth => screen.availWidth has been preadjusted for dpr.
edit It works! http://jsbin.com/IzEYuCI/3/edit. I'll put together a modernizr plugin too
edit And here's the pull request to get it in Modernizr - https://github.com/Modernizr/Modernizr/pull/1139. please upvote if you'd find it useful

This Modernizr plugin may help : Modernizr Retina : HiDPI Test
Note: Requires Modernizr's Media Queries feature