Develop Reference

Is there a way to detect if the device is a VR HEADSET and not just a "VR allowed" device?

I've been searching but I couldn't find... I'm making a three js webgl VR experience but I don't want the VR to be accessible on mobile phones, ONLY on VR headsets.
For the moment I only can detect if the device is able to use VR, but many mobiles are, and I don't want those to allow VR. I've been searching but couldn't find any solution.

Not sure why you'd purposely prevent certain users from accessing the content if they can handle it. But if you really want to exclude mobile devices, you're gonna have to target a specific functionality of theirs. For example, you can disable it if it has touch events:
button.addEventListener('touchstart', (event) => {
// Disable your app however you please
app.disabled = true;
});
Keep in mind this isn't 100% foolproof because some devices could pretend to have touch events, but it can get you pretty close.

The cursor property in CSS does not seem to apply to USB On The Go

Mouse Cursor styling, like Col-Resize and Not-Allowed
See Examples Here
do not seem to apply to the mouse that appears on a phone or tablet through USB OTG. Any way to apply CSS, Javascript or other styles to the OTG mouse?

It is actually Android's kernel that doesn't support different mouse cursors. Even in the app IDE's it is impossible to change the cursor without drawing on top of it. People don't typically use mice on mobile devices for Internet browsing therefore that's why it is not implemented.
If you're absolutely looking for a solution, you will have to host your webpage inside an app container with a WebView and use Android's Javascript Communication Interface to detect the mouse hovers, and a System Overlay to draw on top the mouse cursor. It is a difficult implementation but it is the only solution for the specific situation. I can maybe help you out with the implementation if you request.
Happy developing,

According to Mozilla on this page (scroll down to Browser Compatibility and click the Mobile tab) the question, even of which features might be available for a Mouse cursor that doesn't generally appear on Mobile, remains an unknown, or maybe up in the air. As more OTG applications take hold (one thinks of the usefulness of a tailored mouse in certain game environments - crosshairs, anyone?) perhaps the spec will rise to the occasion...

Lock orientation for mobile devices

How would I lock the orientation for a mobile device using js, phaser or jquery? Is there a generic way to do it so it locks orientation regardless of the platform or device used?
I basically want to lock landscape mode for my browser based game.

There is a forceOrientation and a forcePortrait method in the ScaleManager class. See docs.
We also usually use an image to ask the users to flip their phones.
As well, you can listen to the incorrectOrientation signal so know when the game is in the undesired orientation.
I hope it helps :)

You can also do it using Intel XDK
intel.xdk.device.setRotateOrientation("landscape");
intel.xdk.device.setAutoRotate(false);

How reliable is detecting mobile devices by screen resolution?

This sounds a bit too good to be true, so please tell me if it is.
If I have just one single version of a mobile website (no variations for
different devices, just one website for all mobiles), how reliable it is
to detect mobile devices by screen resolution?
And simply serve the mobile version if screen resolution is < than say 400px.
NOTE: My question assumes that javascript is enabled. Also,I'm aware there's
user agent detection, but I'd like to do without it.

Javascript mobile device screen detection for height is not reliable at all. The problem is that different browsers use different amounts of 'chrome' and different OS versions use different heights for the system bar. All the detection mechanism report unreliably for height (screen.height, window.outerHeight, window.innerHeight - etc,etc)
Width seems to be most reliable on window.outerWidth across all OS's.
Read a most excellent analytical report here:
http://www.tripleodeon.com/2011/12/first-understand-your-screen/

You will want to look into serving different stylesheets via media queries. You can use queries to identify screen widths and only serve certain css to certain devices. For example this query would serve a iphone.css only to devices identified as having the typical dimensions of an iphone:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
There's a detailed article on this subject over at alistapart
Bear in mind though that not all devices recognize media queries. If you need to support lots of older devices like blackberry's and flip phones you should take the advise above for using UA detection - I know it feels wrong if you're coming from the desktop development world but really we have to use the tools we have available to us and Mobile Web is a growing but in many ways still a new horizon.

I came here because I had the same idea and question, and similar situation - the website already requires JavaScript and I'm doing a one-size-fits-all mobile web app, at least for now. Our release cycle is really long - any UA detection I hard-code will be somewhat obsolete by the time the code is tested and released. Since the purpose of this alternate interface is to make it work on smaller screens, it would seem to make sense to use that test.
I don't know however, what size I would pick - I have a hunch mobile devices are not bound (even by convention) to particular screen dimensions. I guess we just have to decide at what point the main web page is no longer functional.
I can understand other people's hesitation to this approach because sometimes there are other issues with a standard site on a mobile device than just the screen size. However, I think there is an advantage to this kind of detection. If your only issue is the screen size, I think it is a good way to go.

Probably not going to hurt to add this functionality to your website for those who are indeed running JavaScript enabled web browsers on their mobile devices. As for those who are not, well there's little you can do about them, other than something simple like letting them select their screen size at first load? Maybe a simple drop down list with possible sizes?

It depends on what you want to achieve.
If you design for different screen resolutions regardless of device type then it is fine to use resolution ranges.
If you design for specific device types (phone, tablet, etc.) and assume a resolution range will always match a single device type, then it will eventually break.
You used a 400px threshold in your example, the Galaxy S8+ reports 412x846 with this code:
console.log("width: " + screen.width + ", height: " + screen.height);
Device resolutions change every year and they are starting to overlap with each other. Large phones have higher resolutions than small tablets and large tablets have higher resolution than some desktops.
You may get away with it if you just want it to mostly work or if you want to detect specific phones.
However it is not reliable to use screen resolution alone to detect the device type.

Anyone know how to lock a website (HTML) to portrait orientation on iPhone with (HTML) meta tags, javascript, etc?

Does anyone know how to either lock Mobile Safari's orientation to portrait, or to block landscape (via javascript or otherwise)?
In other words, I want the web page to remain in portrait mode regardless of the orientation of the device.

You cannot lock orientation in iPhone's Safari browser. You can only detect it and make appropriate changes to your page.

I don't, but...
Consider very carefully whether this is a good idea or not. Personally I'm more often annoyed by the autorotation than not, especially when browsing in bed and the like. However, this should really be the user's own choice. It also looks like the next revision of iPhone OS will contain a software orientation lock, so that the user can disable autorotation at will.