CODEWITHSUNDEEP
javascripthtmlcssscreen-orientation
Azamat Uzbekov
Azamat Uzbekov

Reputation: 150

How to use CSS classes with current-device

I try to lock screen orientation on a portrait for mobile and iPad devices. I can use CSS snippet I 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;
  }

}

This original CSS won't work because some small-size laptops could be considered as iPad or iPad won't fall under (max-width: 767px). As well, in my code, I use the CURRENT-DEVICE module to detect the type of device in the code. I want to use this module to detect mobile and tablet and apply the CSS snippet I showed above. I can detect device on JS like:

    if (device. Tablet()) {
      do something
    }

But how to trigger CSS? On the current-devise github page, they have CONDITIONAL CSS. But I cannot understand how to use them. I googled but couldn't find more information. I hope somebody worked with this module and can help me.

Upvotes: 1

Views: 57

Answers (1)

Richard Henage
Richard Henage

Reputation: 1798

You could use JavaScript to insert a stylesheet like this:

if (device. Tablet()) {
    var newStyleSheet = document.createElement('style')
    document.head.appendChild(newStyleSheet);
    var sheet = newStyleSheet.sheet;
    sheet.insertRule(`
        html {
            transform: rotate(-90deg);
            transform-origin: left top;
            width: 100vh;
            overflow-x: hidden;
            position: absolute;
            top: 100%;
            left: 0;
          }
    `, 0);
}

Upvotes: 1

Related Questions