Как заставить страницу быть альбомной на мобильных устройствах

Цзо Пэнфэй 2017.12.13

1. Предпосылки

В последнее время компания собирается разработать мобильную веб-игру: нажмите и удерживайте кнопку, и велосипед будет ездить все время, а когда вы встретите достопримечательность определенной страны, появится соответствующая подсказка для этой страны. , требующий горизонтального отображения экрана, а не вертикального экрана.

Однако, когда пользователь открывает портретный экран, а ландшафтный режим в мобильном телефоне не включен, пользователь должен принудительно включить его. В это время пользователю уже давно не терпелось выключить свою игру.

И некоторые модели и некоторые приложения не могут быть ландшафтными: например, WeChat для Android не имеет ландшафтного режима, а WeChat для iOS может включать ландшафтный режим.

Решение состоит в том, чтобы написать горизонтальный экранный див в портретном режиме, а затем установить поворот плюс (минус) 90 градусов, чтобы повернуть его; и если пользователь переключается на альбомную, поворот нужно восстановить, и требования могут также отображаться нормально. .

2. Чистый CSS

Поверните основной div горизонтально в портретном режиме, и он останется неизменным в ландшафтном режиме.

@media screen and (orientation: portrait) {
    .main {
        -webkit-transform:rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        width: 100vh;
        height: 100vh;
        /*去掉overflow 微信显示正常，但是浏览器有问题，竖屏时强制横屏缩小*/
        overflow: hidden;
    }
}

@media screen and (orientation: landscape) {
    .main {
        -webkit-transform:rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
}
скопировать код

Но есть проблема, что в ландшафтном режиме, после использования CSS для поворота на 90 градусов, ширину и высоту не так просто контролировать.

width: 100vh;
height: 100vh;

скопировать код

Этот контроль ширины и высоты не подходит для страниц с одной шириной и высотой экрана.

3. js вычисляет ширину и высоту, выравнивание, поворот

Как было сказано выше, при портретной ориентации будут проблемы с шириной и высотой после поворота в альбомную. Это может быть достигнуто с помощью следующих js.

var width = document.documentElement.clientWidth;
var height =  document.documentElement.clientHeight;
if( width < height ){
  $print =  $('#print');
  $print.width(height);
  $print.height(width);
  $print.css('top',  (height-width)/2);
  $print.css('left',  0-(height-width)/2 );
  $print.css('transform' , 'rotate(90deg)');
  $print.css('transform-origin' , '50% 50%');
}

скопировать код

Обратите внимание, что преобразование-происхождение50% 50%, После поворота на 90 градусов вам также необходимо сбросить верх и левый угол, чтобы выровнять его.

4. Окончательный план

Если кнопка поворота экрана телефона пользователя включена, то приведенный выше код по-прежнему имеет проблемы, когда телефон повернут боком.

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
      
    window.addEventListener(evt, function() {
        console.log(evt);
        var width = document.documentElement.clientWidth;
         var height =  document.documentElement.clientHeight;
          $print =  $('#print');
         if( width > height ){
           
            $print.width(width);
            $print.height(height);
            $print.css('top',  0 );
            $print.css('left',  0 );
            $print.css('transform' , 'none');
            $print.css('transform-origin' , '50% 50%');
         }
         else{
            $print.width(height);
            $print.height(width);
            $print.css('top',  (height-width)/2 );
            $print.css('left',  0-(height-width)/2 );
            $print.css('transform' , 'rotate(90deg)');
            $print.css('transform-origin' , '50% 50%');
         }
        
    }, false);

скопировать код

5. Полный код

/**
 * 横竖屏
 * @param {Object}
 */
function changeOrientation($print) {  
  var width = document.documentElement.clientWidth;
  var height =  document.documentElement.clientHeight;
  if(width < height) {
	  $print.width(height);
	  $print.height(width);
	  $print.css('top',  (height - width) / 2 );
	  $print.css('left',  0 - (height - width) / 2 );
	  $print.css('transform', 'rotate(90deg)');
	  $print.css('transform-origin', '50% 50%');
  } 
 
  var evt = "onorientationchange" in window ? "orientationchange" : "resize";
      
      window.addEventListener(evt, function() {

	  setTimeout(function() {
	      var width = document.documentElement.clientWidth;
	      var height =  document.documentElement.clientHeight;
	      // 刷新城市的宽度
	      initCityWidth();
	      // 初始化每个气泡和自行车碰撞的距离
	      cityCrashDistanceArr = initCityCrashDistance();
	
		if( width > height ){
			$print.width(width);
			$print.height(height);
			$print.css('top',  0 );
			$print.css('left',  0 );
			$print.css('transform' , 'none');
			$print.css('transform-origin' , '50% 50%');
		 }
		 else {
		  $print.width(height);
			$print.height(width);
			$print.css('top',  (height-width)/2 );
			$print.css('left',  0-(height-width)/2 );
			$print.css('transform' , 'rotate(90deg)');
			$print.css('transform-origin' , '50% 50%');
		 }
	}, 300);	
   }, false);
}
скопировать код

6. Резюме

Это решение подходит только для ширины и высоты страницы, занимающей один экран, не подходит для прокручиваемых решений.
Использование ориентации и изменение размера для мониторинга горизонтальной и вертикальной коммутации экрана приведет к задержке. Для конкретного решения задержки см. В моей другой статье.js реализует горизонтальные и вертикальные события экрана мобильного телефона