Requirements

• Each page/screen should be viewable both in horizontal (landscape) and vertical (portrait) orientation.

Why is it important?

Users with low-vision should be able to view content in the orientation that works best for them, due to the need for increased text size;
Some users with mobility impairments mount their device to a wheelchair, and need to see content in their preferred orientation.

Benefitted Disability Types

People who have their devices mounted in a specific orientation need applications to always work in that orientation. Users who can rotate their device may prefer one orientation and should have that choice.  For example, low vision and people with cognitive disabilities may prefer landscape orientation. It allows larger text size and longer lines which helps to improve readability. Everyone benefits when the application is easier to use in any orientation.

Summary

Make sure a page’s view is not locked to either portrait or landscape mode, unless this is essential.
A page view must not be locked to either horizontal (landscape) or vertical (portrait) views only, unless this is essential.
Here are some examples of when locking the orientation to one direction may considered ‘essential’: in a messaging app, when making music using a piano app, when viewing slides for a projector show and for television or virtual reality content.

Common Mistakes

Locking the orientation of the device so it is set in one way only, and does not adapt.

Design Guide

• Do not design in such a way that assumes a particular orientation.
• Use show/hide buttons to allow access to content in different orientations.

Orientation Example for IOS

There are several ways to control orientation in iOS apps. The simplest is to override supportedInterfaceOrientations in view controllers:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
	switch UIDevice.current.userInterfaceIdiom {
		case .phone: return .allButUpsideDown
		default: return .all
	}
}

NOTE: iPad by default allows .all orientations, iPhone allows .allButUpsideDown since the iPhone X does not support upside down due to the notch.

You can also use the UIApplicationDelegate supportedInterfaceOrientationsFor callback:

func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
	switch UIDevice.current.userInterfaceIdiom {
		case .phone: return .allButUpsideDown
		default: return .all
	}
}

Finally, you can also use the value set in the app’s Info.plist by setting the UISupportedInterfaceOrientations array:

<key>UISupportedInterfaceOrientations</key>
<array>
  <string>UIInterfaceOrientationPortrait</string>
  <string>UIInterfaceOrientationLandscapeLeft</string>
  <string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
  <string>UIInterfaceOrientationPortrait</string>
  <string>UIInterfaceOrientationPortraitUpsideDown</string>
  <string>UIInterfaceOrientationLandscapeLeft</string>
  <string>UIInterfaceOrientationLandscapeRight</string>
</array>

Orientation Example for Android

By default Android supports both portait and landscape mode.
There is a way to lock it in either mode : (Do that only if it’s necessary)

<activity android:name=".yourActivity" android:screenOrientation="portrait" ... />

The orientation can be handled by the developer as well.

<activity android:name=".yourActivity"
          android:configChanges="orientation|keyboardHidden"
          android:label="@string/app_name">

So the orientation can be handled in code:

override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)

    // Checks the orientation of the screen
    if (newConfig.orientation === Configuration.ORIENTATION_LANDSCAPE) {
        Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show()
    } else if (newConfig.orientation === Configuration.ORIENTATION_PORTRAIT) {
        Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show()
    }
}

But that comes with risks because most of the resources won’t be handled. (Layouts in different orientations, etc…)

Orientation Example for Flutter

By default Fultter supports both portrait and landscape mode.
The orientation of screens can be set/changed at any point in the app.

• Setting the orientation at the beginning of the app:

Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]); 
runApp(MyApp());
}

• Setting the orientation during the initialization of a widget and setting it back after disposing:

@override
void initState() {
  SystemChrome.setPreferredOrientations([
     DeviceOrientation.landscapeLeft,
     DeviceOrientation.landscapeRight,
  ]);
  super.initState();
}

@override
void dispose() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
   ]);
  super.dispose();
}

References

1. UIViewController.supportedInterfaceOrientations developer reference
2. UIApplicationDelegate.supportedInterfaceOrientationsFor developer reference
3. UISupportedInterfaceOrientations developer reference
4. Runtime changes developer reference
5. Managing Screen Orientation on MDN
6. Using Media Queries on MDN
7. Media Queries for Standard Devices on CSS Tricks
8. Orientation Lock on CSS Tricks
9. Responsive Design for Landscape Orientation on CSS Tricks
10. The Orientation Descriptor by the W3C
11. The Screen Orientation API by the W3C
12. Accessibility Guidelines- Github.io