Webmasters Gallery

Media queries allow websites to adjust their layout depending on the screen orientation of a smartphone or tablet. But sometimes you may want your website locked to a particular orientation, portrait or landscape. The format of native apps can be specified in such a case. The app will then only be displayed in the preset format – independently from the actual device orientation. By using the HTML5 Screen Orientation API, you can now define the screen orientation in JavaScript. Define Screen Orientation for a Document The screen orientation can be adjusted via the screen.orientation property and the lock() method. The method’s default value is “any”. This allows the device to apply any orientation depending on the physical orientation of the device. The value “natural” displays the website in the device’s natural orientation, which varies from device to device. Smartphones usually use the portrait mode, whereas tablets prefer the landscape mode. screen.orientation.lock(“natural”); In the above example, it’s set to the natural orientation of the device. Of course, the Screen Orientation API also allows you to define an individual orientation. You can choose between four values, which cover all possible orientations of mobile devices. These are: “portrait-primary”, “portrait-secondary”, “landscape-primary”, and “landscape-secondary”. The […]