2015-08-12 4 views
-3

Я разрабатываю веб-сайт и не знаю, как обращаться с дизайном для мобильных телефонов и настольных компьютеров. Мне кажется, что самый простой способ уменьшить компромиссы адаптивного сайта - создать совершенно отдельный дизайн для настольных и мобильных версий. Чтобы избежать баловаться с бэкэндом, который работает совершенно то же самое, что кажется, что это самый простой способ справиться с этим:Создает отдельный мобильный/настольный дизайн на одной странице плохой практики?

.mobile_page { 
    display: none; 
} 

@media only screen and (max-device-width: 480px) { 
    .desktop_page { 
     display: none; 
    } 
    .mobile_page { 
     display: block; 
    } 
} 

<body> 
    <div class="desktop_page"> 
     ... 
    </div> 

    <div class="mobile_page"> 
     .... 
    </div> 
</body> 

Но это не кажется лучшим решением. Является ли это плохой практикой?

Примечание: Я знаю, что решение CSS не является универсальным, но оно работает относительно хорошо, учитывая его простоту.

+0

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

+1

"* компромиссы отзывчивого *" Какие компромиссы были бы такими, что вы хотели бы создать сайт дважды и заставить пользователей загружать оба? –

+0

@JesseKernaghan Иногда невозможно создать отзывчивый сайт, дизайн которого отлично смотрится как на рабочем столе, так и на мобильном телефоне без большого количества CSS или JS или какого-либо другого кода. Это может привести даже к большей нагрузке, чем включение двух версий на одну страницу. – Mirac7

ответ

1

Несмотря на то, что он скрыт, все равно потребуется время для загрузки DOM и всей логики, которую вы будете там, поэтому я думаю, что это не лучшая практика. Я бы либо использовал бутстрап для создания адаптивного пользовательского интерфейса, либо загружал контент по запросу на основе пользовательского агента/размер экрана/что-то еще.

0

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

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

0

Другие ответы все полностью правы. Используйте Bootstrap или эквивалент. Однако, если для конкретных сценариев у вас должен быть совершенно другой дизайн для мобильных устройств, вы можете использовать что-то для обнаружения серверной части устройства и загрузки контента на основе этого. Это хорошая мобильная библиотека детектирования: http://mobiledetect.net/

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