I've built a PhoneGap app for iPhone. In specific cases, landscape design and support was required, and so I've listened to device orientation notifications, and had my JS app add a '.landscape' css class which rotated the main container by 90 or -90 degrees.
This JS orientation handling was easy and quick, but the problem is the native interface is always portrait-oriented. When native popups are shown, they're always in portrait mode, even if the device is tilted to landscape.
Is there any way to set the orientation of native popups, without having to change the interface orientation (which is basically what I do in JS)?
Or do I have to rebuild the whole thing with proper native landscape orientation?
Related
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 followed the tutorial below to create a Windows Phone 8.1 app for previewing the camera capture:
http://msdn.microsoft.com/en-us/library/windows/apps/Hh452789(v=win.10).aspx
However, there is an undesired behavior of this basic app. When the device is placed horizontally, with the top pointing to the left, the orientation of the preview is the same as the scene, which is fine. However, when the device rotates to the portrait position (top up), the preview auto rotates to a confusing orientation. Below is a picture demonstrating this behavior.
I guess what I want is the same behavior as the built-in Camera app of a Windows Phone, that the preview orientation always follows the camera (image panel) orientation. In other words, no matter how the device is rotated, the house roof tip should always point upward. Is that possible using the developer API? If so, what function or attributes should I use?
One potential solution I can think of is to disable auto rotate for the element that is used to hold the preview. However, I don't know how to do that. In addition, can one disable the auto rotate for only some elements in an app page instead of the entire page? I ask because I want to display some text over the video preview and I want the text to auto rotate for legibility.
MediaCapture _mediaCapture = new MediaCapture();
_mediaCapture.SetPreviewRotation(VideoRotation.Clockwise90Degrees);
await _mediaCapture.InitializeAsync();
await _mediaCapture.StartPreviewAsync();
Check the phone orientation on orientation changed and set the MediaCapture .SetPreviewRotation(VideoRotation.Clockwise90Degrees) as you want.
I'm working with a Windows 8 app using Java Script.
In windows 8 there is only one snap view and that is fixed one. But when we come to the windows 8.1 we can resize the snap view. I want to do is keep that fixed size snap view in windows 8.1 also. That means, I want to stop resizing snap view when my windows 8 app running on windows 8.1..
Is there any way for it...?
Looking for example or any guide... Thank you
#dougajmcdonald is correct. The user is in control and will be able to resize any app to most any size, so your app will need to account for it. You can change the minimum size of your app which gives Windows a hint about where to give the user a snap point. For instance, if you say your app's minimum size is 500px then when the user is dragging the separator, it will snap to 500 pixels, but it will still allow them to resize to say 587 pixels.
I don't believe you can stop it, as it's a part of the OS and apps are supposed to adhere to it.
You can control your app via media queries in the CSS to fix size to particular values when the app width is at certain values.
Or you can detect the application state and look for 'snapped' and set sizes in the JS code perhaps.
EDIT:
In order to use CSS which applies to the application in snapped mode you can find good examples in the MS Template applications, taken from their CSS you can use:
#media screen and (-ms-view-state: snapped) { // my styles }
Which will allow you to apply specific styles in the snapped state.
To my understanding (correct me if I am wrong) a modern Responsive website will change to fit the size and type of device you are using. Or this can be applied if the size of the window changes.
My question is why does my mobile phone display a Responsive site just like how a modern 1080p monitor would display it.
Essentially, my current monitor is running at 30" and is at a resolution of 768p. My phone also has a resolution of 768p.
Many responsive websites use media queries to display a CSS file based on the pixel width.
Wouldn't this be the same for both my monitor and phone?
MY QUESTION: How can I make a site responsive based on the screen size (in inches, etc) and not the screen resolution or number of pixels.
EDIT: My responsive design has 3 levels of CSS for different pixel widths (media-queries). When viewing on a monitor or smartphone, it displays the higher-most level (above 767p). How can I get my smartphone to display my lowest-level CSS (below 480p) even though it actually has more pixels.
I recently created a website using similar tech http://www.super-rod.tv/
It targets on both PC and mobile devices and will response to dynamic browser width resizing.
I used media query with max-width listing from higher-most to lower. For 1080P screens it has the best full screen display and for larger ones like 4K screen it will be centered with a texture background, on lower res like 768P it uses a smaller set of images and also be centered just like on a 4K screen.
If you are only targeting mobile devices, you can use device-width instead see ref here width versus device-width
To force using lowest CSS set you can either by using the max-width of 1000px (I don't think those who are still using 800x600 on PC would be your target?), this would pass out all desktops, or you can use browser UA to tell (defining for all IE,Safari,FF,Chrome,Opera etc., and the rest are mobiles).