Since gadget is the most used technology today, so the study of how to make gadget seems more convenient to the users are highly noted. One of the factors that can make users feel convenient is to create a good screen orientation as people will surely feel uncomfortable to see a website that needs them to twist their head. Therefore, we will give some techniques that can help you achieve your desired result. In fact, if you work as web developer you can combine all of these techniques if you feel it is best for your needs.
CSS media queries
This is one of the most important parts of determining what type of device the user is on and therefore used to determine which techniques work best for this orientation and device. It works by wrapping the CSS rules within a @media section, followed by a list of features, combined with logical operators and, or and not. Browsers will only apply rules declared in this section when its conditions are met. Features range from width and height to aspect ratio, color depth and resolution.
Below is the example of the orientation feature, which can be set to either portrait or landscape:
The element with an overlay class, enticing players to change their device orientation, is hidden when the device is held straight and visible when it isn’t. Even though, at some points CSS rules achieve the good result of visual design, however this program needed to write code to pause or resume the game when the orientation changed.
Orientation Change Events
Other properties and events, such as window.orientation and orientationchange still have a major drawback. In theory window.orientation produces the current device position expressed as a right angle (either -90°, 0°, 90° or 180°). By registering an event handler for orientationchange with the window object, you can be notified when this property changes value:
Even though, Android phones are suitable for the expected model, tablets reveal a different story. They even create 0°when held sideways, because Google presumes tablets are used for wider purposes than smartphones.
However, window.orientation is relative to the primary orientation provided by the device’s manufacturer which makes it inconsistent across devices.
JavaScript MatchMedia
If you are looking for substituting the orientationchange technique, you better try JavaScript matchMedia. This lets you estimate CSS media query conditions programmatically, at any given point in time. It can also be used to notify you when the state of these conditions changes via event handlers. In fact, to check if a device is currently in a landscape mode, you can pass the string “(orientation: landscape)” to the function window.matchMedia(), and then check the matches property of the MediaQueryList object returned as follows:
An event handler isregistered by calling addListener() on the MediaQueryList object obtained in the code above in order to be notified when the device orientation changes. This object will be received by the callback function as an argument when triggered.
The same callback function is passed to removeListener() on the MediaQueryList object when we do not need to be notified anymore:
JavaScript matchMedia complements CSS media queries nicely. Both of them can help obtain a separation of concern: layout versus code. When the orientation is customized CSS media queries handle the visual changes necessary, while the game logic changes are handled by JavaScript matchMedia.
Device Orientation API
Device Orientation API consists of two events providing information from the hardware measuring a device’s position and motion in space: gyroscope and digital compass for its orientation, and accelerometer for its velocity.
If you do not need to use speed measurement, you can leave devicemotion. Through, a series of rotations around three axes: X, Y and X, the orientation data is presented.
Moreover, it will be set to null, when a device lacks the hardware to measure an angle. The frame to interpret these rotations depend on whether DeviceOrientationEvent.absolute is true or false. When true, it uses Earth: X is pointing East, Y is North and Z is up, while false is relative to an arbitrary frame.
Bear in mind that the Device Orientation API also produces a high number of events per second. This is necessary when the web application wants to respond in real time to every subtle move of the device.
Source: http://www.creativebloq.com/web-design/master-screen-orientation-html5-101517371