Могут ли существовать два разных HTML-кода для адаптивных веб-страниц?

Question

Это не столько проблема, сколько помощь в мозговом штурме идей. По крайней мере, по теме, если идея верна или нет. Теперь я знаю, что CSS-визуализация помогает изменить форму страницы, например, при попадании на экран размером с планшет или экран размером с iPhone. Мой вопрос, есть ли способ настроить два совершенно разных дизайна для работы, когда размер пикселя достигает определенного уровня?

Answer 1

Вы можете сделать это в CSS с помощью чего-то похожего на это:

@media (min-width:500px) { … }

Однако этот метод имеет свои проблемы.Если пользователь повернет свой телефон вбок, получит ли он другую версию страницы?Если у пользователя просто отключено разрешение (или у него старый монитор), он застрянет в другой версии?

Из того, как я прочитал ваш вопрос, может показаться, что вы просто пытаетесьопределить, когда кто-то разговаривает по телефону, и дать ему мобильную версию сайта?Если это так, то есть лучшая альтернатива, использующая JavaScript:

function mobileMode(){
var x= navigator.userAgent;
if (x.indexOf('Mobile')>=0){
    //Do mobile stuff here
}
else{
    //Or do desktop stuff here if need be
}

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

Еще одним преимуществом этого является то, что он позволяет кому-то по телефону запрашивать версию сайта для настольного компьютера.

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