We Keep Coding

Is there a preferred JavaScript method for detecting screen size in a browser?

I have been looking at way to detect what screen size I am working with for a website. i.e. iPhone, desktop, tablet, etc.
So far I have come across quite a few methods. I am just looking to see if there is a preferred method, one that is more universal, etc. I realize there is rarely a one size fits all method. Just looking for the best.
If it makes a difference, the website will be a very minimalistic website. It's more of an add-on page for an app. So there will no bells and whistles on it.
window.innerWidth
...
screen.width
...
document.body.clientWidth
...
window.outerWidth;

window.innerWidth = the inner width of your current window (as you adjust the size it will give you the actual width of the window itself... ideal for responsive development).
screen.width = the size of your actual screen.
For application development, I'd recommend utilizing window.innerWidth.

Three.js slow on phone's vertical screen

I have this codepen that I made into a website. My problem is that it performs really slowly on the Chrome browser on my Nexus 5X phone, but when I rotate the screen to horizontal view or when I view the CodePen it runs smoothly again.
I've tried reversing the width and height to see if it was a screen / window height problem, and I've tried decreasing the height by a lot but it still is the same.
Will someone who is more experienced in webgl or three please explain this to me?
function init() {
scene = new THREE.Scene();
height = window.innerHeight;
width = window.innerWidth;
aspectRatio = width / height;
// ...
}

You may need to include some resizing logic in your render loop since the initial window size may change after loading (i.e. when rotated).. and if the window size changes but the renderer is not resized, then the renderer will be rendering to a nonintuitive framebuffer size and may cause problems when trying to scale the output to the actual display.
Edit:
I'm just throwing out guesses. :D And you make good points...
I do see that TODO line 36 Of your index.js.. which could cause problems.. Aside from that everything else in there looks legit to me.
Resizing logic can be tricky, because depending on CSS etc. setting the renderer size, can cause a pathological cascading resize since setting the renderer size, changes the camera size, which can cause a layout change.. and in some strange circumstances can cause small resizes to happen constantly.
Another way to check if this is the problem, is just make your renderer a fixed size square in your init... like 256x256 or something.. and comment out the window.resize listener.. .run that on your phone and see if performance stays consistent on rotations... fwiw, I think i see the issue on my Galaxy S5.. in horizontal mode its super liquid but vertical mode.. seems a little pokey.

Hey are you using PMREMGenerator at all in the code?
I've noticed that using this to generate environment maps really chuggs on the phones in portrait mode

Facebook Instant Games - Wrong Resolution on Mobile (JS/HTML5)

I am creating a Facebook Instant game using GameMaker Studio 2. It works fine on desktop browsers, but on the mobile Messenger app, the resolution gets fixed to 360*640 (or something around that).
While the game goes fullscreen in the app, it seems like the canvas stays at 360*640.
I got the screen size using the code below and applied it to the game:
var w = window.innerWidth * window.devicePixelRatio;
var h = window.innerHeight * window.devicePixelRatio;
Now, the game appears at the correct resolution (720*1280), but doesn't fit into the canvas. Only the top-left (360*640) part of the game is visible.
How can I stretch the size of the Facebook game canvas on mobile? Or is there something I am doing wrong?

Opentok video capture

Is it possible to change the video capture size?
One thing I realized is that the video size is always the same 640x360 and the ratio is 16:9.
Is that something that can be configured? (both the image size and the ratio)
Thanks!

Not at the moment. OpenTok's webrtc archiving implementation is very new and currently in beta . It is still very basic in functionality and does not allow for adjustment for recorded video resolution.

Scaling KineticJS canvas with CocoonJS idtkscale

I got my KineticJS game working inside CocoonJS quite nicely, except scaling the canvas. I have 1024x768 canvas, which is great for iPad 2. But for iPad 4, due to retina screen, the game takes only 1/4th of the screen.
CocoonJS says this about the scaling:
CocoonJS automatically scales your main canvas to fill the whole screen while you still
continue working on your application coordinates. There are 3 different ways to specify how
the scaling should be done:
idtkScale
'ScaleToFill' // Default
'ScaleAspectFit'
'ScaleAspectFill'
canvas.style.cssText="idtkscale:SCALE_TYPE;"; // The SCALE_TYPE can be any of
the ones listed above.
I have tried this adding this:
layer.getCanvas()._canvas.style.cssText='idtkScale:ScaleAspectFit;';
But it is not working. Any idea how to get KineticJS created Canvases to scale in CocoonJS?

When dealing with making a canvas object full screen if on mobile. In CocoonJS this feature is out of the box. So we patched the code to set
document.body.style.width
and
document.body.style.height
These are DOM related and not supported (nor needed on full screen mode). Also code related to canvas style and position was patched, since it isn’t needed.
For now on, the correct way of getting screen size is
window.innerWidth
and
window.innerHeight
To make your Canvas objects full screen, set
canvas.width= window.innerWidth; canvas.height= window.innerHeight
One thing you must know about CocoonJS is that you don’t have to change your canvas size to make it run fullscreen. CocoonJS will up/down scale your canvas and have correct touch coordinates sent. You could choose how you’d like your canvas to be scaled, either keeping aspect ratio or not, and also if you want to have no blurring filter applied to the scaling operation, which comes handy for games relying on pixel art. Refer to the official CocoonJS Wiki pages to know how to control scale operations.
REFERENCE
http://blog.ludei.com/cocoonjs-a-survival-guide/

Okay, I found an answer to this question myself and since there are so many up votes, I want to share the solution.
The solution was to comment some code within KineticJS and then add the CocoonJS scaling to the canvas creation.
Comment these lines (not all at one place):
inside _resizeDOM:
this.content.style.width = width + PX;
this.content.style.height = height + PX;
inside setWidth of Canvas:
this._canvas.style.width = width + 'px';
inside setHeight of Canvas:
this._canvas.style.height = height + 'px';
Add this inside Canvas prototype init:
this._canvas.style.idtkscale = "ScaleAspectFill";
This does the trick for me. Now what I do is I calculate the correct aspect ratio for the canvas and let CocoonJS scale it for me. Hope this is as useful for others as it has been for me!