Ionic2 screen orientation

Ionic Framework ionic-v3
1

Hi,
How to fire an event to detect screen orientation in ionic2 and angular2.??
I have added a cordova plugin cordova-plugin-screen-orientation.
and used
// CompassHeading is an interface for compass
import { DeviceOrientation, CompassHeading } from ‘ionic-native’;

// Get the device current compass heading
DeviceOrientation.getCurrentHeading().then(
(data: CompassHeading) => console.log(data),
(error: any) => console.log(error)
);

// Watch the device compass heading change
var subscription = DeviceOrientation.watchHeading().subscribe(
(data: CompassHeading) => console.log(data)
);

But throwing an error-Cordova not available.
Please help how to solve

2

Hi there it depends what you want to do…

You can use a very easy css @media to change css like this:

@media all and (orientation: portrait){ div{...} }
and
@media all and (orientation: landscape){ div{...} }
and change the css accordingly and
in code platform.isPortrait() that returns a boolean.

I hope it helped a bit :slight_smile:

3

I need to provide one of two different layouts on a few screens depending on if the device is in landscape or portrait mode. I’m successfully using platform.isPortrait() and platform.isLandscape() on load, But how to fire an event on orientation change .

4

Then I guess that you will have to use a plug-in to do that.
maybe this one can help you : http://ngcordova.com/docs/plugins/deviceOrientation/

5

Hi, @Sgouromallis can you explain where does your sample code go? is this CSS syntax?
A more complete example would be grreat.

I need to specify 2 separate styles for an image in a slider to keep it a 4:3 ratio and optimal (ie. using maximum space)

While the following style work for Portrait

#SliderImage {
    width:  calc(100vmin - 10vh ); 
    height: calc(75vmin - 10vh ); 
}

It won’t produce optimal size in landscape mode
so I would like the sizing style to switch to something like this in landscape mode

#SliderImage_Landscape {
    width:  133vmin ;   // maintains 4:3 ratio
    height: 100vmin ;   // pictures takes full height
}

Thank you.