Attempting to lock the screen orientation in portrait mode for mobile and iPad devices using a CSS snippet found on css-tricks.com.
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
However, this initial CSS may not be effective as it could misidentify some small-size laptops as iPads or fail to include all necessary devices under (max-width: 767px). To address this, I have incorporated the CURRENT-DEVICE module into my code to accurately detect device type. The goal is to detect mobile and tablet devices and apply the aforementioned CSS snippet accordingly. Detecting devices in JavaScript can be achieved with:
if (device.Tablet()) {
do something
}
The challenge lies in triggering the CSS based on the detection results. The current-device GitHub page mentions CONDITIONAL CSS, but I am uncertain about its implementation. Despite searching for more information online, I have not been able to find clear instructions. Assistance from someone experienced with this module would be greatly appreciated.