Как настроить сайт так, чтобы при ширине экрана более 500px автоматически открывалась десктопная версия без изменения масштаба?

Как можно исправить скрипт чтобы он правильно работал при изменении ориентации телефона с горизонтальной на вертикальную и наоборот?
  • 29 сентября 2023 г. 6:47
Ответы на вопрос 3
Для открытия десктопной версии сайта при ширине экрана более 500px без изменения масштаба можно использовать медиа-запросы в CSS. Вам нужно указать нужные стили для десктопной версии сайта и применить их, когда ширина экрана больше 500px.

Вот пример CSS-кода для достижения этой цели:

```css
@media screen and (min-width: 500px) {
   /* Стили для десктопной версии сайта */
   body {
      font-size: 16px;
   }

   /* Дополнительные стили для контейнера и других элементов */
   .container {
      width: 960px;
      margin: 0 auto;
   }
}
```

В этом примере все стили, которые находятся внутри медиа-запроса, будут применяться только тогда, когда ширина экрана будет больше или равна 500px. Вы можете изменить эти стили в соответствии с вашими потребностями.

Чтобы исправить скрипт для корректной работы при изменении ориентации телефона, вы можете использовать событие window.onresize. Вот пример JavaScript-кода, который будет перезагружать страницу при изменении ориентации телефона:

```javascript
window.onresize = function() {
   if(window.innerWidth > 500) {
      location.reload();
   }
}
```

В этом примере функция window.onresize срабатывает каждый раз, когда изменяется размер окна браузера. Если ширина окна становится больше 500px, то происходит перезагрузка страницы с помощью location.reload(). Это позволяет перезагрузить страницу и применить десктопную версию сайта при изменении ориентации телефона с горизонтальной на вертикальную и наоборот.

Надеюсь, эта информация будет полезной для вас!
Свойство Window, InternalWidth, предназначенное только для чтения, возвращает внутреннюю ширину окна в пикселях. Это означает ширину области просмотра макета окна. Возможно, вместо этого следует использовать свойство outerWidth 
 Ссылка на документацию
Похожие вопросы