Автоматическое форматирование верстки под меньшие разрешения экрана

[workOnFood]

Всем доброго дня.

Сори, модераторы, если запостил не в тот раздел, просто хз как это решить, можно через php можно через js, и врядли но мало ли может и через html можно.

Есть сайт сверстанный под разрешение экрана 1366x768. Т.е. рабочая область шириной немного меньше 1366 (по середине), имеются картинки и прочее благодаря чему сделать верстку резиновой представляется мне непростой задачей.
Заказчик наотрез отказывается переверстать под 1024/768.

Как все уже наверное поняли из названия топика, нужно сделать так чтобы рабочая область и все что в ней увеличивалось\уменьшалось в зависимости от разрешения экрана.

Думал в сторону zoom но он не везде работает и не везде работает одинаково, плюс js анимации начинают глючить при его использовании.

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

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

Возможно кому-то уже приходилось решать подобную имхо(идиотскую) задачу? Поделитесь мыслями плз.

 

[С.]

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

 

[workOnFood]

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

((((

 

[флоппик]

Вообще, нормальные дизайнеры, когда знают, что нужен адаптив или резина, рисуют соответствующий макет.

 

[С.]

"Резина" и "дизайн" -- две вещи несовместные.
У адаптива не бывает макета, а макетЫ. А это огромный минус подхода отсюда ---------------------------------- и до того края --->

 

[MiksIr]

Картинки которые не влазят ресайзить на JS. Это самый дешевый способ. Более дорогой и зависящий от дизайна - многослойные картинки типа http://www.ech.ru/

 

[workOnFood]

Картинки которые не влазят ресайзить на JS. Это самый дешевый способ. Более дорогой и зависящий от дизайна - многослойные картинки типа http://www.ech.ru/

Ага, дешего и сердито) Думаю можно написать js который будет ресайзить не только изображения но и вообще все. Вопрос в том насколько быстро он будет это делать, не будет ли сильно заметно для пользователя. Да и недостаток с размытостью изображений остается. Но в целом решает проблему. Поэксперементирую.

Второй вариант, если речь идет о правой\левой стороне бэкграунда, не понимаю почему дорогой... но вот достаточно ситуационный это да. Мне вот он не подойдет.

 

[MiksIr]

Ага, дешего и сердито) Думаю можно написать js который будет ресайзить не только изображения но и вообще все. Вопрос в том насколько быстро он будет это делать, не будет ли сильно заметно для пользователя. Да и недостаток с размытостью изображений остается. Но в целом решает проблему. Поэксперементирую.

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

Второй вариант, если речь идет о правой\левой стороне бэкграунда, не понимаю почему дорогой... но вот достаточно ситуационный это да. Мне вот он не подойдет.

О всех картинках, деревья, люди, дома. Дорого ибо изначально нужно дизайнить под такую резину.

 

[workOnFood]

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

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

О всех картинках, деревья, люди, дома. Дорого ибо изначально нужно дизайнить под такую резину.

Ну да, логично. Я не особо внимательно верстку изучал, но суть думаю уловил.

 

[MiksIr]

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

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

 

[workOnFood]

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

Хм. Не знал.

 

[workOnFood]

Сделал используя всего понемногу. Под стили написал парсер. Верстку поправил где надо чтобы если изображение вставляется бэкграундом, то было background-size:100%. Остальные изображения ресайзятся налету через js.

И действительно есть проблема с планшетами. Причем не та что я ожидал. Я стили подключаю с помощью jquery, т.е. как-то так

 $('#main_style').attr('href', 'design/'+this_theme+'/css/'+screen.width+'style.css');

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

Можно где-то взять список значений юзерагентов по которым можно будет отключать ресайз для планшетов?

upd:
Вроде нашел нечто похожее http://mojosunite.com/tablet-user-agent-strings

 

[fixxxer]

Разобраться что да как возможности нет, нету у меня планшета.

http://developer.android.com/tools/devices/emulator.html

 

[workOnFood]

http://developer.android.com/tools/devices/emulator.html

Спс! Что-то я как-то забыл про эмуляторы впринципе. В свое время намаялся с эмуляторами более ранних версий IE и как-то доверие к ним потерялось) Но если на офф сайте, тут надо думать будет более менее нормально все.

 

[Ярослав]

workOnFood

Media Queries