Supporting multiple devices/orientations?

How can I support multiple devices (iPhone & iPad) and multiple orientations (portrait & landscape) in a single script (that displays a table with multiple columns/rows)?

I know I can use Device to detect the configuration at start, but how can I handle an orientation change when the user rotates the device 90 degrees?

(If I’m lucky I can support both orientations for iPad and iPhone landscape in a single layout, but I’ll have to remove columns for iPhone portrait)

Assuming you want to detect screen size and orientation after the script is first run, this should help.


let wv = new WebView;
await wv.loadHTML("<html></html>");
let ht = await wv.evaluateJavaScript("screen.height", false);
let wi = await wv.evaluateJavaScript("screen.width", false);
let or = await wv.evaluateJavaScript("window.orientation", false);
strOr = "portrait";
if (or == 90) strOr = "landscape";
if (or == -90) strOr = "landscape";
console.log(ht + " x " + wi + " : " + strOr + " (" + or + ")")

This is already built in in the Device bridge: https://docs.scriptable.app/device/#isinlandscapeleft and similar for all other 3 directions and https://docs.scriptable.app/device/#screenresolution and https://docs.scriptable.app/device/#screensize

I was assuming from what @rob said that this didn’t work after the inital run. But calling the other worked when it was called later at first run of the WebView in the script. I can’t say I tried the device orientation afterwards as it sounded like that had already been checked.

How does the script get notified of (orientation) changes, after QuickLook.present(table)?

Same question for the WebView solution.

I would like to change the content when the user rotates the device (like several native iOS Apps do).

There is no event to subscribe to device rotation. Maybe @simonbs will implement it someday… But it should be possible in the WebView at least, but I don’t know how.

That’s what I “feared”…

Let’s see what @simonbs has to say about this.