- #DETECT LANDSCAPE VS PORTRAIT REACT NATIVE UPDATE#
- #DETECT LANDSCAPE VS PORTRAIT REACT NATIVE MANUAL#
After manual rotating the device it code below works correctly How do I get the orientation of the device when app starts. The main difference between landscape and portrait image orientation is that a landscape image is wider than it is taller while a portrait image is taller than it is wider. Posted in Tutorials and tagged Coding, Micro-tuts, Tips & Tricks. The current code below will get the orientation however if the device is in Landscape view and you open the app it shows portrait view. Landscape and Portrait are the types of orientation of a photograph or a print. Check-out the Landscape/Portrait Mode detection demo. We will recall our function inside this method:
#DETECT LANDSCAPE VS PORTRAIT REACT NATIVE UPDATE#
But wait what if we change the orientation now? Yes, we need to update the class on orientation change.įor this, we have window.onorientationchange method, which is also available on devices only. When our page is ready, check the class of body element. I think window.load method is better and safe. Now its time to call the function, you can call it directly or on window.load method. I have used switch statement to set the currMode variable, which we are going to use as class on required html elements. So here it goes our function:ĭocument.getElementsByTagName("body").setAttribute("class", currMode) However, many dont, and there are good reasons to require an app to function solely or. react-native-orientation Share Follow answered at 4:38 Santosh Sharma 2,116 1 16 28 Add a comment 2 only this one line add on your project in your android:screenOrientation'landscape' android->app->src->main->AndroidManifest. Many apps work well in portrait and landscape device orientations. orientation method, this function will only work in handheld devices. 3 Answers Sorted by: 3 Try Following package may be help you.
If we get the degree 0 – its the mode portrait else its landscape. Inside this function we will check the device orientation degree which we are going to take from window.oriantation method. And here it goes my JavaScript function that will detect the landscape/portrait mode.įirst, let us create a function called ‘ checkOrientation‘ so that we can evoke it by just a name instead of repeating whole lines. If you prefer to use CSS3 media queries, check out the post on Stuff & Nonsense. I Googled for the solutions, but I must say I couldn’t find any reliable one :(. You might want to try with you own device. The demo page should show text ‘Portrait’ on portrait mode and ‘Landscape’ on respective mode. So I came to write a JavaScript fix to get work done.Ĭheck my orientation test using CSS3 queries here. I failed to make queries detect device orientation on iPhone. But it wont work on certain situations like I had. Detecting device mode (landscape or portrait) using CSS3 is now very much easy and it is state of art.
0 kommentar(er)
