CODEWITHSUNDEEP
javascriptandroidgoogle-chromescreen-orientation
Udo G
Udo G

Reputation: 13121

changing screen orientation in a Chrome PWA

I built a Progressive 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?

Upvotes: 8

Views: 6578

Answers (1)

t1gor
t1gor

Reputation: 1292

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.

Upvotes: 4

Related Questions