I have a app which I have built in PhoneGap and within the Android Manifest file I have set the orientation to landscape, as my app is required to be in landscape mode at all time.
The issue I have is that I have a few external links, which load up in the default phone browser, however due to the fact that the phone is being held in landscape mode the page loads in landscape mode, which then does not fit all the content properly.
So my question is whether there is a way to set the orientation to automatically change to portrait when the external link is clicked. I am currently loading the external page within my javascript using:
window.location.href = "http://www.test.com";
Thanks in advance,
You cannot do like this. User can only set the orientation of browser into default portrait or landscape mode
Related
I am developing a mobile first web application and I have this certain scenario.
The default behaviour of screen orientation changing from portrait to landscape is as follows:
What I want to happen is whenever I switch to to landscape mode, the address bar should remain the same as if it was still in portrait mode, like in the following image.
Is this possible to achieve?
During the step of saving the stream to a file WebRTC switches from 9:16 portrait resolution to 16:9 landscape resolution on mobile browsers The issue does not affect the locally stored files to replay in a users browser but once the file gets saved to the server instead of portrait mode it gets saved in landscape mode. This only happens on mobile devices. Is there maybe mobile related syntax that might fix this?
I tried to force portrait mode but it did not affect the resolution when recording on mobile browsers and storing the files on the server. The problem persists regardless if I use record.js or WebRTC.
I have a webapp that is running in the chrome web browser on Android.
I want to lock the orientation to landscape.
I tried several options according to this tutorial:
using ScreenOrientation.lock(), which is experimental.
The example code here does not work in my mobile phone (Pixel3, Android 11) - when the device is rotated, the orientation changes.
I also tried a CSS trick, which rotates the screen by 90 degrees, if it detect that the device is in portrait mode.
The screen is rendered in landscape mode in the simplified example, but the functionality of the real application is broken. For example, when moving the finger in the x direction is interpreted as moving in y direction.
Other tries also failed on my Pixel3 phone in Chrome in Android (when rotating the device the orientation changes)
I am able to lock the orientation by installing the page as a PWA "Add to Home Screen" and using a manifest with
cat manifest.json
"display": "standalone",
"orientation": "landscape",
But this requires that the user installs the app as a PWA
I want to lock the orientation of the webapp while it is running in the regular browser.
Is this possible?
Thanks
The best bet you could do is generate a simple popup that disallows input, ie; covering the screen. Then use the following code [which can be better fine-tuned] to detect if the user is in portrait or landscape mode.
setTimeout(() => {
if(window.innerHeight > window.innerWidth){
document.body.getElementById('custom-popup').classList.add('show');
// Obviously you'd have to make a popup that is visible when the class 'custom-popup` is added.
} else {
document.body.getElementById('custom-popup').classList.remove('show');
// The user switched to landscape presumably
}
}, 3000);
I'm coding an application React-Native in which i need one screen to be locked on landscape (without any action from the user), how can i do this ?
I tried the "transform" props but couldn't manage to make it works
In Android :
Navigate to the AndroidManifest.xml file. the path is android/app/src/main and set android:screenOrientation to the landscape.
In iOS:
Open iOS folder of your project with Xcode. In general tab, find device orientation and set it to landscape left or right.
The abovementioned is ok to change the orientation of all the screens. if you need to change one particular page only, you can use this library.
I built a Portable Web Application (PWA) that specifies "orientation": "portrait" in it's Manifest file.
This ensures that the application is displayed in portrait mode no matter how the phone is held (at least with Chrome).
This is fine for nearly all situations for my application, but there are situations where an embedded YouTube video is shown (iframe embedding API). When placing the video into fullscreen mode, the video is displayed in portrait mode, which is not useful.
Can I change the desired screen orientation via JavaScript? Or at least "unlock" the orientation so that the manifest setting is temporarily disabled?
What we ended up doing is removing "orientation" property completely from manifest.json. That would allow full screen video with rotations. I guess if you really want to leave only "portrait" orientation in the rest of the app, you can lock it with JS using the screen.orientation API: https://caniuse.com/#feat=screen-orientation (81.82% supported):
// to lock portrait
ScreenOrientation.lock("portrait");
// and then allow any
ScreenOrientation.unlock();
Please note, that this is still a working draft, not a live spec. Some more docs and info from Mozilla. Hope that helps.