Как управлять шириной экрана через js?

Здесь я попытаюсь объяснить свой прецедент. На моем сайте у меня есть точка останова для рабочего стола и точка разрыва для просмотра планшета (что более компактно). Я пытаюсь добавить функцию, позволяющую видеть вид планшета при просмотре с рабочего стола, так как некоторые члены предпочитают компактный дизайн на своем рабочем столе.Как управлять шириной экрана через js?

Для этого я решил, что мне нужно будет обмануть запрос «@media (max-width: X)». Я ищу JS-код, который может манипулировать значением ширины экрана, поэтому, когда браузер вычисляет максимальную ширину, это будет против значения, которое я указал.

Следует отметить, что это должно работать на настольных браузерах, поэтому мета-видовое окно не может использоваться здесь.

источник

2014-12-24 Alvarez

Ширина экрана - это ширина фактического просмотра. Вы не можете изменить это с помощью JavaScript. Пользователи могут, конечно, изменить размер своих окон браузера вручную или использовать трюк, подобный инструменту '' CTRL-SHIFT-M''. – Pointy

Одним из решений может быть: Добавить класс 'tablet' или' desktop' в тег 'body'. Стиль ваши элементы по-разному, используя подклассы. Затем вы можете манипулировать этими классами с помощью JS. Я еще не пробовал это. –

Что это такое? Используется ли он для тестирования или для использования в производстве (клиенты/посетители должны использовать это)? –

Одним из решений является применение определенного класса (например: .tablet) к корпусу.

<body class="tablet"></body>

В вашем CSS:

@media screen and (/* your query */) { 
    .tablet .my-class { 
     /* tablet specific stuff */ 
    } 
}

Затем можно удалить .tablet класс и заменить его .desktop через JavaScript

var body = document.body; 

var switchToDesktop = function() { 
    body.className = body.className.replace('tablet', 'desktop'); 
} 

var switchToTablet = function() { 
    body.className = body.className.replace('desktop', 'tablet'); 
} 

var toggleView = function() { 
    (body.className.indexOf("tablet") > -1) ? 
     switchToDesktop() : 
     switchToTablet(); 
}

Если вы используете SASS или МЕНЬШЕ , вы можете вложить стили, специфичные для планшета.

@media screen and (/* your query */) { 
    .tablet { 
     h1 { 
      /* tablet specific h1 */ 
     } 
     .my-div { 
      color: red; 
     } 
     /* etc... */ 
    } 
}

источник

2014-12-24 15:44:13 railgun

Как управлять шириной экрана через js?

ответ

Смежные вопросы