2/2/2024 0 Comments Screeny javascript![]() There are two requirements for defining the orientation via screen.orientation. If you want to remove the defined orientation, call the unlock() method. This allows the device to display both orientation modes. You can also do without “primary” and “secondary”, and only use “portrait” or “landscape” as keywords. Similarly, “landscape-secondary” differs from “landscape-primary” in its 180° rotation. The value “portrait-secondary” rotates the portrait mode 180°, so that the website is virtually upside down when holding the device in its natural orientation. The value “portrait-primary” for smartphones is identical to the value “natural” and corresponds to the default orientation. These are: “portrait-primary”, “portrait-secondary”, “landscape-primary”, and “landscape-secondary”.Īll four values: “portrait-primary”, “portrait-secondary”, “landscape-primary”, and “landscape-secondary” You can choose between four values, which cover all possible orientations of mobile devices. Of course, the Screen Orientation API also allows you to define an individual orientation. In the above example, it’s set to the natural orientation of the device. Smartphones usually use the portrait mode, whereas tablets prefer the landscape mode. ![]() The value “natural” displays the website in the device’s natural orientation, which varies from device to device. ![]() This allows the device to apply any orientation depending on the physical orientation of the device. The screen orientation can be adjusted via the screen.orientation property and the lock() method. Photo by Caspar Camille Rubin on Unsplash Define Screen Orientation for a Document By using the HTML5 Screen Orientation API, you can now define the screen orientation in JavaScript. The app will then only be displayed in the preset format – independently from the actual device orientation. The format of native apps can be specified in such a case. But sometimes you may want your website locked to a particular orientation, portrait or landscape. Media queries allow websites to adjust their layout depending on the screen orientation of a smartphone or tablet.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |