Адаптивный веб-дизайн на "интерфейсе" против "бэкенда"?
По-видимому, есть два способа сделать адаптивный веб-дизайн. Я не уверен, как назвать эти два метода, но давайте просто скажем, что они являются внешним и внутренним:
По интерфейсу Я имею в виду обычный способ изменения размера макета при изменении размера вашего браузера (например, загрузчик Twitter, основа и т. Д.).
По серверной части Я имею в виду загрузку мобильной версии или настольной версии в домене верхнего уровня. Это похоже на наличие
m.example.com
иexample.com
, кроме ваших сценариев, загружает мобильную или настольную версию только вexample.com
(нет необходимостиm.example.com
).
Лично я нахожу способ интерфейса немного "хакерским", и он требует много размышлений/тестирования для достижения желаемого результата, а также увеличивает размер файла на одного посетителя. В то время как внутренний способ кажется простым и простым, размер файла на посетителя меньше.
Я склоняюсь к бэкэнду. Но, похоже, это внешний способ (загрузчик Twitter, Фундамент и т. Д.) Повсюду. Есть ли какие-либо проблемы с бэкэндом, потому что он кажется менее популярным выбором?
3 answers
Резюме: Используйте адаптивный веб-дизайн (то, что вы называете интерфейсом).
Когда вы используете "серверную" версию, у вас есть следующие недостатки:
Вам нужно создать два веб-сайта: один для настольных компьютеров и один для мобильных устройств. Или вам нужно создать интеллектуальное пользовательское решение, которое автоматически выводит один и тот же контент на два разных веб-сайта. Нелегко.
Вы должны найти надежный способ узнать, использует ли ваш посетитель мобильный или браузер для рабочего стола. Это сложно, халтурно и ненадежно (по крайней мере, пока).
Вам нужно не только обслуживать настольные и мобильные устройства, у вас есть планшеты, а также планшеты большего и меньшего размера и мобильные телефоны, теперь вам нужно создать несколько веб-сайтов, а не только 2. Кроме того, список размеров экрана устройства растет с каждым днем.
Когда вы переходите к адаптивному веб-дизайну, вы избегаете всего вышеперечисленного, а также работаете с надежными фреймворками и новейшими технологиями и вы также найдете множество способов устранить любые проблемы, с которыми столкнетесь. Кроме того, в новых версиях браузера реализованы новые функции, которые сделают адаптивный веб-дизайн проще и надежнее.
Удачи.
Ваше здоровье.
Перейти на внешний интерфейс
Use a responsive framework, like twitter bootstrap or similars
, создайте только 1 веб-сайт для всех.
Затем use media queries
переключать правила css там, где вам нужно, для мобильных устройств или нет.
И определенно switch all you want to show or not in mobile and desktop by server side
.
Например, huge banner on mobile is useless
, переключите, используя модули html и условия на стороне сервера, примером может быть:
<?php if(isNotMobile()){ ?>
$this->loadModuleBanner(); //this loads html module
<?php } ?>
Таким образом, чем лучше вы разбираетесь в создании модулей, тем легче читать код вашего сайта, поддерживать, масштабировать
Использование 2 разных веб-сайтов сведет вас с ума, если вы не имеют 2 команды разработчиков 1 для мобильных устройств/планшетов и 1 для настольных компьютеров
Подумайте об этом так: независимо от размера вашего экрана или устройства, ваш контент одинаков плюс минус несколько элементов, которые могут не иметь отношения к определенным типам устройств.
Это аналогично размещению контента на экране и распечатке этого контента. Вы можете использовать отдельные таблицы стилей для носителей screen
и print
. Вы не создаете отдельный веб-сайт только для просмотра в печати.
Аналогично, для другого размера экрана не требуется отдельная серверная часть.
Если вы использовали MVC
архитектура, все ваши изменения понадобятся только на V (view)