как автоматически вращать веб-игру в мобильном телефоне / вкладке и т. д. - PullRequest
Новая
       6

как автоматически вращать веб-игру в мобильном телефоне / вкладке и т. д.

0 голосов
/ 03 февраля 2020

Я создаю веб-игру. Теперь я хочу автоматически поворачивать экран телефона при посещении с мобильного телефона. любое предложение.? Я попробовал это CSS ниже, но это также не сработало 

@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;
  }
}

Пожалуйста, дайте мне предложение, по которому экран будет автоматически поворачиваться при открытии в мобильном телефоне.

1 Ответ

0 голосов
/ 03 февраля 2020

Попробуйте 

body{
     margin:0;
     overflow:hidden;
   }

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
        .wrapper{
            transform: rotate(90deg);
            transform-origin:bottom left;
            position:absolute;
            top:-100vw;
            height:100vw;
            width:100vh;
            font-weight: 600;
        }
        }
<div class='wrapper'>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta, orci id porttitor convallis, odio dolor hendrerit mi, nec vestibulum ipsum est et nulla. Nam elementum mi eget arcu scelerisque congue. Proin eros magna, condimentum sed interdum nec, tristique in turpis. Mauris vulputate
        </p>
        <hr />
        <div>
        <a href="google.com" target='_blank'>Google</a>
        </div>
        <p>Rotate 90 degree</p>
        <hr />
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQjhOBG4ztvrvf0Jw6p_J3lMhnnKZ4TupbpIDVNy9OM38skvpi4" />
    </div>
...