Мобильная и десктопная верстка, как не грузить лишнее?

Question

[Dp76]

Я стараюсь делать на сайте одну ветку шаблонов, и для десктопов и для мобильных.
Пользуюсь конечно для этого Bootstrap'ом. Давно уже с ним работаю. Но постоянно прихожу к одному и тому же вопросу.

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

Я не нашел ничего изящнее чем просто делать два дива, которым давать соответственно .hidden-xs или .hidden-md
Но при таком повороте пользователь прогружает оба дива.
Есть ли возможность разделять в одном темплейте две сущности?

Answer 1

[Владимир Иванов]

Если блоки достаточно мелкие можно грузить и оба.
Если же блоки крупные, и это не критично для SEO грузите их по ajax.

Для мобильных, чтобы уменьшить время загрузки, вместе со страницей можно загружать только элементы первого-второго экрана, а остальные по ajax следом подтягивать.
Этакий lazyload контента.

Comments

[Dp76]

Первый более менее удобоваримый ответ, в принципе по ajax грузить блоки это вариант, вопрос вот еще в чем - как средствами jQuery, Bootstrap подгружать те или иные элементы? Смотреть по разрешению экрана? Или же все таки юзер агент брать?

[Владимир Иванов]

Dp76: По своему опыту скажу, что лучше ориентироваться по ширине браузера. Ориентироваться на устройство, сами понимаете, нецелесообразно при их обилии. А на Usear-Agent тем более - он вообще может никакой информации о размерах окна браузера не нести.

Ширину можно определить любым удобным Вам методом:
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
или
$( window ).width();
$( document ).width();

Затем обработать её и передать в ajax запросе. В зависимости от параметров запроса выдать соответствующую версию блока.

[Владимир Иванов]

Dp76: И еще помните, что величины определенная разными способами могут оказаться разными. Хороший описано тут ryanve.com/lab/dimensions

Answer 2

[Andrew]

Если не предполагается использование браузеров раннего палеолита, то можно так:

<picture alt="description of image">
  <source src="small.jpg">
  <source src="medium.jpg" media="(min-width: 400px)">
  <source src="large.jpg" media="(min-width: 800px)">
  <img src="small.jpg" alt="description of image">
</picture>

Comments

[littleguga]

Современные ios, safari, edge - не хотят: proof

[Andrew]

littleguga: Я знаю, это на будущее )

[Думай Головой]

Andrew
так то решение крутое, с сафари беда

[webdisigner]

И что это? Верстка должна быть чистой как младенец, все это можно задать в стилях, вообще бутстрап конечно сишит вам мозги

[Думай Головой]

webdisigner
а вот и не правда
картинки товаров для интернет магазина з**тесь задавать в стилях
грузить десктопные большие картинки для планшета с мобильным интернетом - глупо. Подключать php решения в виде responsive images - костыль. Так что техника офигенная, темболее чем buit-in де факто стандарт будущего.

[webdisigner]

Думай Головой: надо будет об этом почитать, спасибо за ответ.

Answer 3

[Думай Головой]

Картинки успешно разделяются через backround image и media queries - лишние не грузятся.

А вот с тегом img посложнее - нужно специальное решение на php использовать вроде responsive images.
Или самому на js закодить - в зависимости от вьюпорта подгружать в img src ту или иную картинку

Comments

[littleguga]

А если style в шапке подключать через media queries - грузить не будет лишнее?

[Думай Головой]

Скорей всего нет.
Так или иначе - в хроме есть офигенный инспектор, там можно глянуть что он грузит при этом, а что нет

[littleguga]

Думай Головой: я мобильного до понедельника. А узнать хочется :)

[Думай Головой]

Отписываюсь) Код в шапке


Хром показывает не стал грузить картинку на вьюпорте больше 1200 пикселей

[Думай Головой]

littleguga

<style>
        @media screen and (max-width: 1200px) {
            body {
                background: url("https://upload.wikimedia.org/wikipedia/commons/d/d6/Wp-w4-big.jpg");
            }
        }
    </style>

[littleguga]

Думай Головой: Спасибо большое, теперь могу спать спокойно.

Answer 4

[Владимир Ребров]

Picturefill

Answer 5

[SerzN1]

Пользуюсь конечно для этого Bootstrap'ом.

вот в этом весь подвох, пользоваться без понимания происходящего

https://developer.mozilla.org/en-US/docs/Web/CSS/M...
первая же строка дает пояснение как делать отдельный цсс (картинки, фоны и тп можно засунуть в этот цсс в дата-урл или просто грузить нужного размера) + srcset + модульная структура

в foundation есть спец функции foundation.zurb.com/docs/components/interchange.html, что в принципе не сложно самому написать как минимодуль