Парни, подскажите в чем проблема. Сайт на мобильных устройствах открывается сначала как десктопный и только после полной загрузки сжимается для мобильной адаптивной верстки. Как это можно исправить?

Вот код подключения

<link href="main-style.css" rel="stylesheet" media="screen">
<link rel="stylesheet" media="(max-width:600px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width:601px)" href="desctop.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

main-style.css Общие стили (фон, шрифт)
mobile.css скрытие дэсктопных ненужных элементов + стили для мобильных устр.
desctop.css скрытие мобильных ненужных элементов + стили для компа

На медленном инете сайт сек 10 показывается вообще сломанная верстка, потом собирается в нормальный дизайн. При этом элементы которые надо скрыть все отображаются в эти 10 сек.

_____________
..Работает - не трогай!

попробуй так:

default.css
его содержимое:

@import url("main_style.css");
@import url("mobile.css");
@import url("desctop.css");

если main_style.css большой по размеру и с него дергается куча стилей которые войдут в mobile.css, то думаю ничего не изменится.

Принцип работы такой логики вот в чем:
нужный файл css подгрузится ТОЛЬКО, если на странице используются имеющиеся на ней стили

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

maximka787, мне кажется, тут надо в целом немного перестроить структуру загрузки данных.
Как вообще грузится страница? Сначала полностью загружается HTML. Браузер начинает его показывать (с некоторой задержкой), одновременно подгружая файлы стилей и JS. По мере подгрузки стилей они применяются. И совершенно естественно, что при медленном соединении сначала будет показан "кривой" HTML, затем к нему будет применен первый набор стилей, а затем второй.

Я предлагаю вообще изменить всё. Сначала грузи одну простейшую страницу, которая содержит ссылку на единственный и мелкий файл JS. Он определяет, какое устройство у тебя используется и грузит для него только те стили, что нужны. Остальные вообще не грузятся. После чего грузится нужный файл HTML, который прописывается внутри body. За счет загрузки только нужных данных будет уменьшено время загрузки.
В самом начале загрузки можно (средствами JS) показать какой-нибудь индикатор загрузки. А по окончании загрузки у тебя будет сразу показана правильная страница.
Плюс к этому, используй минификатор и для CSS, и для JS. Это еще больше ускорит загрузку.
Ну и кэш HTML, при правильном использовании, также ускорит все последующие загрузки

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

Ещё наличие нестандартных шрифтов тупит, если они весят много

_____________
Если долго в одних стенах живешь, ты с ними сростаешься

Всем спасибо за поддержку. Пробовал эти методы и изменял их. В итоге, внезапно решилась проблема. Надо было media условие прописать внутри css файлов, а не в <link>.


_____________
..Работает - не трогай!