Веб-страницы по умолчанию создаются в портретной ориентации, то есть с вертикально расположенной шириной и горизонтально расположенной высотой. Однако, в некоторых случаях возникает потребность в создании страницы в альбомной ориентации, когда ширина страницы превышает высоту. В этой статье мы рассмотрим несколько способов, как сделать, чтобы страница была в альбомном листе.
1. Использование CSS
body { transform⁚ rotate(90deg); transform-origin⁚ left top; width⁚ 100vh; height⁚ 100vw; overflow-x⁚ hidden; position⁚ fixed; top⁚ 0; left⁚ 0; } overflow⁚ hidden; }
Обратите внимание, что этот метод применяет поворот всего содержимого страницы на 90 градусов против часовой стрелки и устанавливает размеры страницы в виде 100% от высоты окна просмотра (100vh
) и 100% от ширины окна просмотра (100vw
).
2. Использование JavaScript
Второй способ изменить ориентацию страницы ‒ это использовать JavaScript. Для этого можно использовать следующий код⁚
window.onload function { if (window.innerHeight < window.innerWidth) { document.body.style.transform 'rotate(90deg)'; document.documentElement.style.width '100vh'; document.documentElement.style.height '100vw'; document.documentElement.style.overflowX 'hidden'; document.documentElement.style.position 'fixed'; document.documentElement.style.top '0'; document.documentElement.style.left '0'; } }
Этот код будет выполняться при загрузке страницы и проверять, является ли ширина окна просмотра больше высоты. Если это так, то он применит поворот всего содержимого страницы и установит размеры страницы аналогично первому методу.
3. Использование печати
Еще один способ сделать страницу в альбомном листе ⎯ это использовать функцию печати браузера. Для этого необходимо следовать этим шагам⁚
- Нажмите Ctrl P на клавиатуре (или выберите функцию печати в меню браузера).
- В окне печати выберите опцию ″Настройки страницы″ или ″Параметры страницы″.
- В разделе ″Ориентация″ выберите опцию ″Альбомная″.
- Нажмите кнопку ″Печать″ или ″OK″.
Этот метод будет создавать физический отпечаток страницы в альбомной ориентации. Однако, имейте в виду, что результат может зависеть от настроек принтера и размера бумаги.