Develop Reference

Disable fullpage js on mobile devices

I tried to disable the fullpage js for mobile devices but it is not working.
The script i am using is :
<script>
var isPhoneDevice = "ontouchstart" in document.documentElement;
$(document).ready(function() {
if(isPhoneDevice){
//mobile
}
else{
$(document).ready(function(){
$('#fullpage').fullpage();
responsive: 700 // here is solution
})
}
});
</script>
website link : http://demo.lamppostmedia.in/arklan-dev/
Help me disable it.

There's no such thing as a "mobile device" anymore. Is a table a mobile device? Is a touch screen laptop consider a desktop?
The right way to deal with this is basing the behaviour on the resolution of the device the visitor is accessing from.
That's why fullPage.js version 3 provides the options responsiveWidth and responsiveHeight that allow you to turn off the snap effect when reaching certain threshold.
See the Responsive width example for fullPage.js.
And the examples code here:
https://github.com/alvarotrigo/fullPage.js/tree/master/examples
You can read more about responsive options in the the fullpage.js documentation:
responsiveWidth: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.

How to react to changes in the dimension/size of a video track in a `MediaStream`?

In my web app I obtain a MediaStream either via getUserMedia or getDisplayMedia. In certain situations, the video track of that stream can change its size. For example, if getDisplayMedia tracks a specific window, that window can change size. Or on a mobile device, when switching from landscape into portrait mode, the camera image will be rotated by 90° (i.e. width and height get swapped).
I know how to get the dimensions of the MediaStream (as described here). I now want to get notified whenever the dimensions change. A callback/event of some sorts.
I already tried MediaStream.onaddtrack (guessing that maybe the track is removed and readded with a different size) and I also tried using a MutationObserver on the <video> element I am showing the stream in. None of these worked. I also checked MDN for other events that might help me, but I didn't find any promising ones.
Is there a way to subscribe to changes of a video track's dimension? A function of mine should be called each time the dimensions change. And if it's not possible and I would need to busy poll: is there a smart way how to make the polling a bit less busy?

You can subscribe to resize event of your video element
const video = document.getElementById("video");
video.addEventListener("resize", (e) => {
const { videoWidth, videoHeight } = video;
// can do smth here
// for example
video.style.width = videoWidth;
video.style.height = videoHeight;
}, false);

WebRTC Webcam constraints don't adapt to device orientation

I am implementing a photo-taking application in html and javascript (actually Angular 1.x). The app is mostly used on Android tablets but also phones and Windows computers.
My Problem
when the user flips the tablet (portrait / landscape), the camera "flips" as well. Meaning, when you hold your tablet in landscape mode the camera is in landscape mode as well and when you flip the tablet, the camera is in portrait mode. But the system keeps the width and height parameters of the camera.
This wouldn't be much of a problem if I where to display the video only, but I need to copy the image, crop it, scale it etc. So I need to be sure that the camera's width is actually the width.
My implementation
To give you an idea, I tried to extract the code that is responsible for the camera:
// I have a static array with possible camera resolutions
private resolutions = [
{width: 320, height: 240},
{width: 600, height: 480}
];
// and the camera constraints that I initialize like this
this.constraints = {
audio: false, // no audio needed
video: {
facingMode: "environment", // I want the back camera
width: {
exact: 4096 // initial width
},
height: {
exact: 2160 // initial height
}
}
};
// I use that array to query the system for a camera that fits these resolution constraints (it's recursive, so I call this function with the last index of my resolutions-array)
testCameraResolution(resolutionIndex: number) {
if (this.checking) {
this.constraints.video.width.exact = this.resolutions[resolutionIndex].width; // overwrite the width value of the constraints
this.constraints.video.height.exact = this.resolutions[resolutionIndex].height; // overwrite the height value of the constraints
navigator.mediaDevices.getUserMedia(this.constraints).then((stream: MediaStream) => {
// when the navigator returns a camera with these constraints, I found my resolution and can stop testing.
this.checking = false;
for (let track of stream.getTracks()) {
track.stop(); // I stop the camera stream
}
this.videoResolution.width = this.constraints.video.width.exact;
this.videoResolution.height = this.constraints.video.height.exact;
this.startWebCam(); // and start the webcam
}).catch((error) => {
// no camera was found that matches these constraints, continue testing
if (resolutionIndex > 0) {
this.testCameraResolution(resolutionIndex - 1);
}
});
}
}
How it works
The page loads and my script will try to start the webcam with {width: 600, height: 480}, if the navigator cannot return a camera with these constraints, the script will continue and test {width: 320, height: 240}.
Let's say the navigator can return a camera with 320x240, then the page will finish loading and I can display and manipulate the image. Nice. Always taking it for granted, that the video's width is the number of pixels from "left to right" and it's height spans from "top" to "bottom".
But when I load the page on a tablet and I flip the tablet to "portrait" mode, the navigator still gives me the camera with {width: 320, height: 240}, although it displays it with width=240 and height=320 (in portrait mode). So now all my image manipulation doesn't work anymore because width and height are inversed.
My Solution
So I figured, when the page is in "portrait" mode (the browser window is higher than it is wide), then I just inverse width and height of the camera. And this actually works on a tablet - but of course it doesn't work on a desktop computer.
So here is my actual question
Is there a way to query the "navigator" if the whole device is in "portrait" or "landscape" mode without relying on the browsers width and height?

If you are sure it doesn't necessarily need to work on safari. You can use the Screen API.
https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
In that page you have an example.

In short: There is not a solution for all devices.
Like #Nicolas Nobile pointed out, the Screen API is the most useful tool. However, Safari still does not support it so you can use the workaround as described here:
https://stackoverflow.com/a/36650956/10408987 (all Credit goes to him)
Screen API
screen.orientation.onchange = function (){
// logs 'portrait' or 'landscape'
console.log(screen.orientation.type.match(/\w+/)[0]);
};
Detect yourself (on safari):
function getOrientation(){
var orientation = window.innerWidth > window.innerHeight ? "Landscape" : "Portrait";
return orientation;
}
window.onresize = function(){ getOrientation(); }
Just noticed that you asked 2 years ago. I came across the same problem so I thought I answer on how I solved it.

Cordova camera resize on orientation change

When taking a photo via navigator.camera.getPicture and changing the device's orientation inside the photo interface, the webview's viewport doesn't resize upon returning. The blank space is not part of the HTML document, so internal resizing in the app doesn't help.
A plugin bug? Is there a way to force resizing on the cordova / webview layer?
That's the result of starting vertical, opening the photo interface, turning into horizontal and returning to the app:

Dirty fix after returning from the camera interface:
fixCordovaCameraBug: function() {
if (... == 'iOS') {
var actions = window.StatusBar.isVisible ? ['hide', 'show'] : ['show', 'hide'];
window.StatusBar[actions[0]]();
window.StatusBar[actions[1]]();
window.setTimeout(function() {
// framework specific
Ext.GlobalEvents.fireResize();
}, 1);
}
},

This was just fixed with cordova-plugin-statusbar#2.2.0

Easiest way to determine if user is on mobile device

I'm showing a notification bar on my website, and frankly, it doesn't work well when its on a mobile device. I'd like to show the bar ONLY for desktop users.
What is the easiest way to determine if a user is on desktop or on mobile?

A user agent check is the "easiest", though you could easily employ CSS3 media queries
Here is an example that checks iphone, android and blackberry; you could easily add other mobile browsers.
var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false;

Check this http://detectmobilebrowsers.com/
Work for Javascript, jQuery etc.

I find that it's best to use feature detection. Use Modernizr to detect if it's a touch device. You can do things like:
var mousedown = 'mousedown';
if (Modernizr.touch) {
mousedown = 'touchstart';
}
$('.foo').on(mousedown, handleMouseDown);
And then use CSS Media Queries for handling screen width (and it's also easy to detect screen width with javascript). That way you can correctly handle touch devices with large screens, or non-touch devices with small screens.

If you use modernizr. a "no-touch" class will be added to the element. You could hide the bar by default and add a css rule to show the bar if the "no-touch" class exists. Example:
default:
.bar{display:none;}
desktop:
.no-touch .bar{display:block;}

If the user is on a mobile device this javascript 'if' will return true.
if (navigator.userAgent.indexOf('Mobile') !== -1) { ...
See also: https://deviceatlas.com/blog/list-of-user-agent-strings

The easiest way to differentiate between touch and non-touch devices is using media queries.
1) CSS to target Mobile/Touch Devices can be written using media query,
#media (hover: none), (pointer: coarse) {}
2) CSS to target Desktop/Non-Touch Devices (only) can be written using media query,
#media not all and (pointer: coarse) {}
On Few latest mobile devices (Eg: IOS 10+, one plus etc.,.) hover is detected hence we use, the (2) to identify non-touch devices.

const is_mobile = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/BlackBerry/i);
if (is_mobile != null){
popup.modal('show');
}

If you are reading this post 2021, there is an even easier way to find this out.
let isMobile = window.navigator.userAgentData.mobile;
console.log(isMobile);
The above method simply returns a boolean value.