Сайт начинает адекватно выглядеть(адаптироваться под мобильные устройства) только после обновления страницы. В чем может быть дело?

Question

[R1msk1y]

Приветствую!
Есть лендинг сделанный на тильде( на сколько я понял по коду в верстке).
Мне нужно сделать адаптив под мобильные устройства.
Но вот какой момент - верстка вроде уже адаптивна, но сайт начинает адекватно выглядеть только после обновления страницы.
То есть - открываешь в первый раз, заходишь в инспектор кода, сайт выглядит так: https://d.radikal.ru/d39/2111/b5/ce73d7b96186.png
Нажимаешь f5(обновляешь страницу) выглядит так: https://a.radikal.ru/a41/2111/32/97b0b8383f64.png
То есть после обновления, страница страница адаптируется.
В чем может быть дело?

Comments

[Pavel-ww]

Я думаю, этот вопрос надо задавать в поддержку Тильды

[Ankhena]

В чем может быть дело?

Например, в браузере.
Попробуйте тоже самое, но в FF. А главное на реальном устройстве поворотом экрана.

Или в скриптах на сайте, которые не учитывают ресайз.

Без кода точно никто не скажет.

p.s. для вставки скринов есть кнопочка, 4 слева в редакторе вопроса. Чтобы не было нужды открывать новые страницы. (И перечитайте правила на эту тему)
Если они большие, то убираются в спойлер.

[Adamos]

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

[Ivan1331]

На многих сайтах то же самое, где то js при загрузке страницы определяет что вы с ПК сидите, где то сервер css файл для мобилки не отдаёт, так как видит что вы с ПК сидите, причин может быть много. Ну а вообще, а в чем проблема, кто кроме Вас будет смотреть как выглядит страница в инспекторе кода? Если при обновлении всё работает как нужно, значит Вы всё правильно сделали

[R1msk1y]

Ankhena, по поводу скринов принял, буду так делать теперь
а по поводу моего вопроса - да, адаптация идет через JS
на мобильниках нормально открывается, на ПК нет, только через обновление страницы адатируется)

[R1msk1y]

Ivan1331, да, на мобильниках нормально открывается, на компе только через обновление.
Но вполне возможно что его это не устроит)

[R1msk1y]

Adamos, да, на реальных устройствах - все ок работает.
Сайт адаптирован JSом. На компе видимо проблема в тех вещах что вы назвали.
Что то можно с этим сделать?)

[Adamos]

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

[R1msk1y]

Adamos, скрипт на адаптив вставлен прям в index.html
код такой:

<script>$(document).ready(function () {
            setTimeout(function () {
                t_onFuncLoad('tcart__init', function () {
                    tcart__init('370676885', '');
                });
            }, 50); /* fix for Android */
            var ua = navigator.userAgent.toLowerCase();
            var isAndroid = (ua.indexOf("android") > -1);
            if (isAndroid && !$('.t-body').hasClass('t-body_scrollable-fix-for-android')) {
                $('.t-body').addClass('t-body_scrollable-fix-for-android');
                $('head').append("<style>@media screen and (max-width: 560px) {\n.t-body_scrollable-fix-for-android {\noverflow: visible !important;\n}\n}\n</style>");
                console.log('Android css fix was inited');
            } /* fix Instagram iPhone keyboard bug */
            if (ua.indexOf("instagram") !== -1 && ua.indexOf("iphone") !== -1) {
                $(".t-body").css("position", "relative");
            }
            var cartWindow = $("#rec370676885 .t706__cartwin");
            var curMode = $(".t-records").attr("data-tilda-mode");
            if (cartWindow.length && curMode != "edit" && curMode != "preview") {
                cartWindow.bind('scroll', t_throttle(function () {
                    if (window.lazy === 'y' || $('#allrecords').attr('data-tilda-lazy') === 'yes') {
                        t_onFuncLoad('t_lazyload_update', function () {
                            t_lazyload_update();
                        });
                    }
                }, 500));
            }
        });</script>

[Adamos]

R1msk1y, очень странно, что у вас на ПК что-то происходит при обновлении страницы.
Этот говнокодище всовывает дополнительный стиль в заголовок страницы, но только при условии, что в UserAgent упомянут Android.

[R1msk1y]

Adamos, мне кажется проще этот лендос с нуля переписать, чем со всем этим париться)))

[Adamos]

R1msk1y, не имею возражений.

[Tilda Master]

Во-первых, через инспектор смотрите не в Responsive, а выбирайте одно из устройств
Во-вторых, сначала открывайте инспектор, а потом сайт))
В третьих чего переживать о том как он отображается через инспектор, если с телефона будет нормально отображаться

Answer 1

[ikutin666]

скорее всего адаптив сделан используя js, а при изменение размера js не срабатывает, потому что нет обработчика на событие изменение размера