TLDR; orientation is hard. We've temporarily removed it from the spec. We have
two proposals below.
Orientation of an application is dependent on the media features of the
display. For example an application might need to be launched in landscape on
phones (in order to have sufficient display width), but prefer to be in
portrait on tablets.
When analyzing applications across various runtimes, we've found evidence that
such applications are common (e.g., basically any application on the iPhone
that has an iPad counterpart will be designed to constrain to a particular
orientation based on the device being used: LinkedIn, Flipboard, GoodReads,
etc. will all go from portrait-primary on the iPhone to allowing "any"
orientation on the iPad. A more extreme example is BBC iPlayer - which supports
portrait-primary on the iPhone, but both landscape orientations on iPad. The
same can be seen on Android devices. Unlike native apps, Web Apps should not
target devices/OS's - they have to be device neutral.
In order to address the use cases, we currently have two proposals.
Option 1: Provide a list of orientation sets in the manifest. The user agent
uses the first one with a matching media query. The order in which the
orientations are listed by a developer does not imply a preference for setting
the orientation - it is always left up to the user agent to pick the best
orientation given, for example, how the user is holding the device. In the
example below, no orientation is given for widths of 721px or above, so the
default is used: allowing all orientations supported by the device.
{
"orientations": [{
"media": "max-width: 320px",
"supported": ["portrait-primary", "landscape"]
}, {
"media": "max-width: 720px",
"supported": ["landscape"]
}]
}
In this example, a device with a screen width of 320px or below would start
either "portrait-primary" or "landscape" with the abilty to be "flipped"
depending on how the user is holding the device (and OS permitting). A device
with a screen width of 321px through 720px would request to be launched in
landscape (leaving it up to the UA to pick either landscape-primary or
landscape-secondary, while allowing "flippability"), and a device with a screen
width of 721px and above would start in any orientation chosen by the UA
(ideally, one that matches how the user is holding the device).
Option 2: The second proposal is to remove orientation from the manifest and
use CSS @viewport instead. This would mean:
<head>
<style>
/*set it by default to portrait primary for small screens */
@media (max-width: 320px) {
@viewport {
orientation: portrait-primary, landscape;
}
}
/*Tablet, switch to landscape only*/
@media (max-width: 720px) {
@viewport {
orientation: landscape;
}
}
/* similarly on screens with a width of 721px or more, all orientations
are allowed */
</style>
</head>
Problem with using @viewport at the moment is that the specification is
progressing a bit slowly and no one has implemented the "orientation"
descriptor. It also lacks definitions for "-primary" and "-secondary"
contraints, which are important for various applications, and doesn't currently
allow providing multiple allowed orientations - hopefully the CSS Device
Adaption spec can align with the Screen Orientation spec.
