Web app screen orientation lock: Orientation lock failed - javascript

I have used several methods from other questions to try to lock the screen orientation for my web app, but the lock orientation always fails. Here is my code:
// lock orientation to portrait
window.screen.lockOrientationUniversal = window.screen.lockOrientation || window.screen.mozLockOrientation || window.screen.msLockOrientation;
if (window.screen.lockOrientationUniversal("portrait")) {
console.log("Orientation locked to portrait");
} else {
console.log("Orientation lock failed.");
}
I have also tried this with just screen. instead of window.screen. and get the same thing. Note that this is being tested on the latest Firefox for Android and that the web-app is not a full-screen app.
I also get the following message:
Use of the orientation sensor is deprecated.
Which makes sense as the Mozilla site mentions that it is deprecated. What is the latest supported way to do this?

1.) Screen.lockOrientation is deprecated (as seen in the MDN link you provided), so the code you have probably won't work in most modern browsers.
2.) ScreenOrientation is just the interface, which is why ScreenOrientation.lock("portrait") does not work. Basically, ScreenOrientation is the thing in the background that tells the browser how the screen orientation object should be built (similar to prototypes in JavaScript), but it is not the object itself.
In modern browsers, you can access the global screen orientation like this:
var myScreenOrientation = window.screen.orientation;
(source: https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation)
Later you can lock the orientation with this:
myScreenOrientation.lock("portrait");
and unlock it with
myScreenOrientation.unlock();
The .lock() method returns a Promise if you want to do anything with that, but it's outside the scope of this question, so I'll just mention that it exists.
3.) Another possible issue: under current standards, many browsers will REQUIRE that a page be in fullscreen mode to lock a device's orientation. Since your web app is not fullscreen this will likely also prevent the orientation being locked. (see 5.3 of the web standard: https://www.w3.org/TR/screen-orientation/)

Related

getUserMedia in PWA with manifest on iOS 11

I have created a PWA which uses WebRTC's getUserMedia to get a live camera stream. The PWA uses a manifest.json, and works great on Android.
On iOS however, the app also works if I open the link directly in Mobile Safari, but if I add it to the homescreen, it is undefined (as iOS only allows it in the Safari-context).
As a workaround, I would like to open the app in Mobile Safari instead of fullscreen mode, but I don't know how to do this, as it automatically opens fulscreen once it detects the manifest.json.
Does anyone have an idea as how to open an app with a manifest in Safari?
Thank you!
There is a way to open the PWA avoiding full screen mode.
In manifest.json, change the display attribute to "browser".
"display": "browser"
Refer this documentation under section "Display".
You can also consider "minimal-ui" option.
Please keep in mind, when you make this change, it will not just reflect in iOS, but also in Android.
On the actual issue in accessing getUserMeida, I don't understand why its not working in full-screen mode. Its just a HTML5 feature and nothing specific to PWA. So ideally, it should work in full-screen mode as well. Try to capture for any error when you open in full screen mode and post that here if you find any. It might be due to permissions as well and I recommend solving the issue in full-screen mode for better user experience.
I figure out this by adding two manifest.json, one used by default for non ios devices and one for ios devices, I also create a detect.js script to detect wheter or not an ios device is accessing the pwa and change the manifest.json reference on the html. There is the code:
// Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
// change manifest.json
if (isIos()) {
document.getElementById("manifest").href = "ios-manifest.json";
}
I would suggest you to set apple-mobile-web-app-capable to no with this meta tag in the head of the document:
<meta name="apple-mobile-web-app-capable" content="no">
This will avoid iOS to understand your web app as a PWA.

How to know if a mobile device is showing desktop?

I have seen very many questions asking how to detect if a device is mobile or not. Generally, they fall into 3 categories:
Check the screen size/viewport
Check the User Agent
Use a library, such as Modernizr to work around browser capabilities.
After implementing what I could, I still run across a situation which I have never seen asked or addressed; On many mobile browsers, there is a "Request desktop site" (Chrome) "Desktop Mode" (Dolphin) or "Desktop View" (HTC Sense).
I have chosen strategy #1 above, which works unless the page is viewed in desktop mode. Implementing #2 has drawbacks (spoofing, uncatalogued agents, etc.).
Is there a reliable (cross browser) way to detect Desktop Mode on a mobile browser with Javascript? jQuery or other libraries would be okay, but it should be based upon feature detection, rather than an array of User Agents.
So, Finally I have proven method to detect this. There's little tricky but got Exact Solution.
STEP 1
Install device-uuid Library , ( Here already mentioned. How to install )
<script src="https://raw.githubusercontent.com/biggora/device-uuid/master/lib/device-uuid.min.js"></script>
<script>
var user_configuration = new DeviceUUID().get();
console.log(user_configuration);
</script>
// output
// {"isAuthoritative":true,"isMobile":true,......"resolution":[980,1104],"browser":"Chrome"}
STEP 2
Detect device width
var curr_width = parseInt((window.innerWidth).toFixed());
STEP 3
Now need to compare curr_width with user_configuration.resolution[0] (width)
If both are same then this is normal view and if not then it's "DESKTOP VIEW" . attaching screenshot.
if(curr_width == user_configuration.resolution[0]){
alert("normal_view");
}else{
alert("desktop_view");
}
Screenshot of Desktop Mode ON in mobile browser
Screenshot of Normal mobile view
There is no way for a webpage to detect whether the device is actually a desktop computer or not. When "Request desktop site" is enabled, the phone acts just like a desktop does. One way to check this is to check the OS of the device. However, some phones use windows as their OS, so this won't work on windows phones.

Can I use Javascript to get the compass heading for iOS and Android?

Can I use Javascript in a cross-platform way to get the compass heading in iOS and Android (with Chrome), without using something like PhoneGap? I know iOS has DeviceOrientationEvent, but I can't find any equivalent on Chrome for Android.
As a primer you should review this previous related StackOverflow answer and be familiar with the general practical considerations for using DeviceOrientation Events in web applications.
The simple solution I provided in my previous related StackOverflow answer only applies to browsers that implement absolute deviceorientation events (i.e. browsers where the deviceorientation alpha property is compass-oriented). That means the solution provided there currently only works in Android browsers and not iOS-based browsers or any other browser that does not provide absolute-based deviceorientation event data.
To reliably obtain the current compass heading across both Android and iOS browsers today you need to handle both absolute and non-absolute implementations that provide the additional webkitCompassHeading property and make sure to account for any current screen orientation changes as part of that. AFAIK the only library that currently does this is Full Tilt JS (disclaimer: I am the author of this library).
The following code will give you the same correct compass heading across both iOS and Android browsers, taking account of the differences in device orientation implementations and applying any necessary runtime screen orientation transforms too:
<!-- Include the Full Tilt JS library from https://github.com/richtr/Full-Tilt-JS -->
<script src="fulltilt-min.js"></script>
<script>
// Obtain a new *world-oriented* Full Tilt JS DeviceOrientation Promise
var promise = FULLTILT.getDeviceOrientation({ 'type': 'world' });
// Wait for Promise result
promise.then(function(deviceOrientation) { // Device Orientation Events are supported
// Register a callback to run every time a new
// deviceorientation event is fired by the browser.
deviceOrientation.listen(function() {
// Get the current *screen-adjusted* device orientation angles
var currentOrientation = deviceOrientation.getScreenAdjustedEuler();
// Calculate the current compass heading that the user is 'looking at' (in degrees)
var compassHeading = 360 - currentOrientation.alpha;
// Do something with `compassHeading` here...
});
}).catch(function(errorMessage) { // Device Orientation Events are not supported
console.log(errorMessage);
// Implement some fallback controls here...
});
</script>
Here is a demo that demonstrates this technique to obtain the compass heading the user is facing. It should work well on both iOS and Android browsers.
The implementation of the code in that demo is as shown above and can be viewed on Github at ./scripts/compass.js:L268-L272.
Yes you can! Unfortunately the alpha doesn't work on iPhones/iPads. With Mobile Safari, alpha is based on the direction the device was pointing when device orientation was first requested. The included webkit offers you the compass heading. To make it work for all other browsers (which all supports alpha as compassheading) you can use the following Javascript code:
if (window.DeviceOrientationEvent) {
// Listen for the deviceorientation event and handle the raw data
window.addEventListener('deviceorientation', function(eventData) {
var compassdir;
if(event.webkitCompassHeading) {
// Apple works only with this, alpha doesn't work
compassdir = event.webkitCompassHeading;
}
else compassdir = event.alpha;
});
}
Android also supports Webkit, so would also use event.webkitCompassHeading, but that's OK.
BTW: "oncompassneedscalibration" is also not supported for iPhones and iPads.
I believe you can use the "heading" field of the location object, from navigator.geolocation, please see here:
https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation
I know no other way.
Hope it helps,
A.

Flash always on top in Android browser workaround?

I have a website with a simple Flash animation behind some text and semi-transparent images as a background. I have used swfobject to embed it and set wmode opaque to make it display correctly in most browsers.
For browsers without Flash, the user gets a static background image instead and would not know they were missing anything. However, Android users get the flash background on top of everything as per the known issue with how Flash content is rendered in the Android browser making the site unusable.
I have added a crude browser sniff javascript function to the swfobject code to prevent it from loading for any user agent whith 'Mobile' in it:
<script type="text/javascript">
if (navigator.userAgent.indexOf('Mobile') == -1)
{
var flashvars = {};
var params = { wmode: "opaque" };
var attributes = {};
swfobject.embedSWF("Images/Layout/center_flash.swf", "flashBg",
"1004", "502", "9", "false", flashvars, params, attributes);
}
</script>
The only problem I have left is for Android users browsing with 'Mobile View' turned off as the user agent pretends to be a desktop version of Safari (I think). I do not wish to disable the Flash animation for all Safari users. Is there a way of blocking it for just Andriod users - even if they have 'Mobile View' disabled?
Possible ideas include:
detecting the Flash version with JavaScript or Flash. Does Android use specific versions (version numbers) of Flash which are different from the desktop equivalent?
blocking the specific user agents used by Android devices with 'Mobile View' disabled.
Has anyone come up with an effective workaround for this issue?
Your help/input is appreciated!
You can detect android only by checking the userAgent of the browser in your JavaScript
Something like this:
if (navigator.userAgent.toLowerCase().indexOf("android") != -1)
{
// It's android
}
As far as the flash issue itself, I don't know as I never use flash :P
edit
You can also use that technique for other useragents (I.E. iPhone, iPad, safari)
edit2
Sorry, I just went on my android phone and realized the actual setting changes the userAgent to whatever the user picks (desktop/ipad/iphone/safari). That's no good then, I apologize.
Unfortunately, what you are asking is very difficult then. There are no unique identifiers in the android flash version to give you any help. And the fact that android spoofs the userAgent makes it impossibly to detect if they are on mobile or not.
There exist services that can tell you whether a user is on mobile based on their IP.
I'm sorry to say I don't know how fast, reliable, or expensive they are, but if you must determine whether a user is on Android, that's an avenue to consider

UIWebView getOrientation always "portrait" on iPad2

I have a nice running HTML5 Website with some JavaScript. This Page is called in a UIWebView.
The Page runs some JavaScript to check, weather the iPad is in Portrait or in Landscape Mode.
And here is the Problem. It doesn't matter, if the iPad is in Landscape or in Portrait-Mode, the Function call:
orientationObserver.getOrientation()
always returns "portrait".
Is this a known Problem, or am i doing something wrong? I set the View containing the UIWebView to landscape mode with:
- (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return (interfaceOrientation==UIInterfaceOrientationLandscapeLeft);
}
i do an:
alert(orientationObserver.getOrientation()
in the JS and it returns always "Portrait", the device (and so the App) runs in landscape.
You can specify CSS styles based on viewport orientation: Target the browser with body[orient="landscape"] or body[orient="portrait"]
However Apple's approach to this issue is to allow the developer to change the CSS based on the orientation change but not to prevent re-orientation completely. I found a similar question here.

Categories

Resources