Адаптивный веб-дизайн на "интерфейсе" против "бэкенда"?


По-видимому, есть два способа сделать адаптивный веб-дизайн. Я не уверен, как назвать эти два метода, но давайте просто скажем, что они являются внешним и внутренним:

  • По интерфейсу Я имею в виду обычный способ изменения размера макета при изменении размера вашего браузера (например, загрузчик Twitter, основа и т. Д.).

  • По серверной части Я имею в виду загрузку мобильной версии или настольной версии в домене верхнего уровня. Это похоже на наличие m.example.com и example.com, кроме ваших сценариев, загружает мобильную или настольную версию только в example.com (нет необходимости m.example.com).

Лично я нахожу способ интерфейса немного "хакерским", и он требует много размышлений/тестирования для достижения желаемого результата, а также увеличивает размер файла на одного посетителя. В то время как внутренний способ кажется простым и простым, размер файла на посетителя меньше.

Я склоняюсь к бэкэнду. Но, похоже, это внешний способ (загрузчик Twitter, Фундамент и т. Д.) Повсюду. Есть ли какие-либо проблемы с бэкэндом, потому что он кажется менее популярным выбором?

Author: IMB, 2013-09-09

3 answers

Резюме: Используйте адаптивный веб-дизайн (то, что вы называете интерфейсом).

Когда вы используете "серверную" версию, у вас есть следующие недостатки:

  1. Вам нужно создать два веб-сайта: один для настольных компьютеров и один для мобильных устройств. Или вам нужно создать интеллектуальное пользовательское решение, которое автоматически выводит один и тот же контент на два разных веб-сайта. Нелегко.

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

  3. Вам нужно не только обслуживать настольные и мобильные устройства, у вас есть планшеты, а также планшеты большего и меньшего размера и мобильные телефоны, теперь вам нужно создать несколько веб-сайтов, а не только 2. Кроме того, список размеров экрана устройства растет с каждым днем.

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

Удачи.

Ваше здоровье.

 2
Author: Mario Awad, 2013-09-13 12:15:13

Перейти на внешний интерфейс

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 для настольных компьютеров

 2
Author: itsme, 2013-09-13 12:27:42

Подумайте об этом так: независимо от размера вашего экрана или устройства, ваш контент одинаков плюс минус несколько элементов, которые могут не иметь отношения к определенным типам устройств.

Это аналогично размещению контента на экране и распечатке этого контента. Вы можете использовать отдельные таблицы стилей для носителей screen и print. Вы не создаете отдельный веб-сайт только для просмотра в печати.

Аналогично, для другого размера экрана не требуется отдельная серверная часть.

Если вы использовали MVC архитектура, все ваши изменения понадобятся только на V (view)

 1
Author: karancan, 2013-09-16 20:10:55