Как в CSS повернуть горизонтальный сайт на 90° чтобы на смартофне можно было горизонтально смотреть?

Отличный вопрос! Поворот всего сайта на 90 градусов для горизонтального просмотра на смартфоне — это комплексная задача, которая затрагивает не только CSS, но и метатеги, и возможно JavaScript. Рассмотрю все аспекты подробно.

Основные подходы к решению

1. CSS Transform (Наиболее простой способ)

Самый прямой способ — использовать CSS transform для поворота всего контейнера сайта.

/* Для мобильных устройств в портретной ориентации */
@media (max-width: 768px) and (orientation: portrait) {
  body {
    transform: rotate(90deg);
    transform-origin: center center;
    width: 100vh;  /* Меняем ширину и высоту местами */
    height: 100vw;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50vw;  /* Центрирование */
    margin-left: -50vh;
  }
  
  html, body {
    overflow: hidden;  /* Отключаем скролл */
  }
}

Плюсы: Простая реализация, работает сразу
Минусы: Может нарушить работу некоторых элементов интерфейса

2. Медиазапросы ориентации

Более правильный подход — создание отдельной версии для горизонтального просмотра:

/* Стили для горизонтальной ориентации */
@media (max-width: 768px) and (orientation: landscape) {
  .container {
    /* Ваши стили для горизонтального просмотра */
    display: flex;
    flex-direction: row;
  }
  
  /* Дополнительные адаптивные стили */
}

3. JavaScript + CSS подход

Комбинированный подход для более точного контроля:

// Проверяем ориентацию и размер экрана
function checkOrientation() {
  if (window.innerWidth < 768 && window.matchMedia("(orientation: portrait)").matches) {
    document.body.classList.add('rotate-90');
  } else {
    document.body.classList.remove('rotate-90');
  }
}

// Запускаем при загрузке и изменении размера
window.addEventListener('load', checkOrientation);
window.addEventListener('resize', checkOrientation);
window.addEventListener('orientationchange', checkOrientation);

.rotate-90 {
  transform: rotate(90deg);
  transform-origin: center center;
  width: 100vh;
  height: 100vw;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50vw;
  margin-left: -50vh;
}

Полное решение с учетом всех нюансов

Вот более комплексное решение, которое учитывает различные аспекты:

/* Базовые стили для поворота */
@media (max-width: 768px) and (orientation: portrait) {
  html, body {
    overflow: hidden;
    touch-action: none; /* Отключаем стандартные жесты */
  }
  
  body {
    transform: rotate(90deg) translateX(-100%);
    transform-origin: top left;
    width: 100vh;
    height: 100vw;
    position: absolute;
    top: 100%;
    left: 0;
  }
  
  /* Фикс для различных браузеров */
  body {
    -webkit-transform: rotate(90deg) translateX(-100%);
    -ms-transform: rotate(90deg) translateX(-100%);
  }
}

/* Дополнительные медиазапросы для разных устройств */
@media (max-width: 480px) and (orientation: portrait) {
  /* Специфические стили для маленьких экранов */
}

@media (min-width: 769px) {
  /* Отключаем поворот на больших экранах */
  body {
    transform: none !important;
  }
}

Важные метатеги для Viewport

Обязательно добавьте правильные метатеги в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Для принудительной ориентации можно использовать:

<!-- Только для горизонтальной ориентации -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, orientation=landscape">

Потенциальные проблемы и решения

Скроллинг: После поворота скроллинг может работать некорректно. Решение:

   // Кастомная реализация скролла
   document.addEventListener('touchmove', function(e) {
     if (document.body.classList.contains('rotate-90')) {
       e.preventDefault();
       window.scrollBy(e.touches[0].pageX - startX, e.touches[0].pageY - startY);
     }
   }, { passive: false });

Размеры элементов: Используйте относительные единицы (vw, vh, %) вместо фиксированных пикселей.

Производительность: CSS transforms используют аппаратное ускорение, но на слабых устройствах может быть lag.

Альтернативный подход: Force Landscape

Если вам нужно именно принудительно перевести сайт в ландшафтный режим:

function forceLandscape() {
  if (window.innerHeight > window.innerWidth) {
    // Показываем инструкцию для пользователя
    document.getElementById('rotate-message').style.display = 'block';
  }
}

Заключение

Поворот сайта на 90 градусов технически возможен, но требует тщательной проработки всех аспектов:

Корректная работа трансформаций
Адаптация интерфейса
Обработка пользовательского ввода
Оптимизация производительности

Рекомендую начинать с простого CSS transform подхода и постепенно добавлять функциональность по мере необходимости, тщательно тестируя на различных устройствах и браузерах.