HTML - Переключение между рабочим столом и мобильным представлением не работает при изменении размера браузера

Question

У меня есть веб-страница, позволяющая переключаться между режимами просмотра «Мобильный» и «Рабочий стол».Я использую приведенный ниже код для переключения между макетами рабочего стола и мобильного телефона.

$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View

$('meta[name="viewport"]').prop('content', 'width=1024');  // Toggle code for Desktop View

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

Обновление:

1. Адаптивный дизайн отлично работает на мобильных устройствах (скажем, когда ширина
2. Адаптивный дизайн отлично работает в браузере рабочего стола (при изменении ширины до

Answer 1

Я пробовал один и тот же код в разных макетах начальной загрузки.Результаты одинаковы.Кажется, нет проблем с моим кодом.

$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View

Это предназначено для работы на мобильных устройствах или симуляторах.Не для браузеров настольных компьютеров.

Переключение представлений «Мобильный» / «Рабочий стол» в браузере не представляется возможным.

См. Этот ответ: установка окна просмотра с использованием мета-тега окна просмотра для браузеров рабочего стола

Answer 2

Попробуйте использовать точки останова медиазапроса при загрузке https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries