Как изменить отображение на отзывчивую, а не перезагрузить страницу?

Question

Мой веб-сайт имеет 2 дисплея: P C Просмотр и Мобильный просмотр. Я хочу, чтобы при смене представления браузера на адаптивный веб-интерфейс менял отображение на мобильный, но не перезагружал окно. Каков наилучший способ сделать это?

Answer 1

Как обсуждено далее в комментариях,

Итак, при нажатии на переключатель панели устройства в инструментах разработчика, предположим, что ваша страница имеет некоторую форму, а когда она находится в веб-представлении, вы набрали Art некоторую строку в поле ввода и когда вы щелкнете по инструменту панели инструментов, изменилось на отзывчивое, вам нужно очистить значения в форме ввода в основном, как страница загружает первоначальный вид.

Таким образом, вы можете использовать событие resize для объекта окна и запускать перезагрузку всякий раз, когда происходит изменение размера

ES-6 самое позднее

window.onresize = () => { window.location.reload()}

Старше

window.onresize = function(){ window.location.reload()}

Если вы не хотите перезагружать страницу, вы можете использовать отзывчивый , в основном это сделано в css части.

В мобильной реакции вы добавите ширину, например, до 1024, что это настольный компьютер, вы можете иметь это css

Если оно ниже 720, как при просмотре планшета, необходимо использовать это css, как и в случае с ним.

Вы можете прочитать больше на выше ссылка.