Joomla 2.5 Как сделать мобильную версию сайта?

Discussion in 'Проектирование' started by romansom, Jun 6, 2014.

  1. Offline

    romansom Пользователь

    Joined:
    Mar 21, 2014
    Messages:
    68
    Likes Received:
    1
    Gender:
    Male
    Какими решения вы пользуетесь?
    Чтобы сайт на iphone, ipad отлично выглядел

    Или все зависит от шаблона резиновый или нет?
     
  2.  
  3. shure348
    Offline

    shure348 Активист

    Joined:
    Aug 21, 2012
    Messages:
    145
    Likes Received:
    27
    Gender:
    Male
    bootstrap, skeleton - тысячи их
    а вообще принцип простой
    испольуются @media queries и грубо говоря в каждой такой @media пишется отдельная цсс для популярных разрешений
    и в основном ширина блоков из пикселей переводится в проценты (для мобильного разрешения чаще ширина всех блоков 100% и они выстраиваются один под другим)

    Код (css):
    1. /* Smartphones (portrait and landscape) ----------- */
    2. [USER=84522]@media[/USER] only screen
    3. and (min-device-width : 320px)
    4. and (max-device-width : 480px) {
    5.  
    6.     //ТУТ ЦСС СВОЙСТВА ДЛЯ ШИРИНЫ ЭКРАНА ОТ 320 ДО 480
    7.  
    8. }


    курите http://frontender.com.ua/media-queries/ :)
    для таких штук я обычно создаю отдельный файл цсс чтобы в любой момент отключить это дело

    и не забудте про <meta name="viewport" >
    без правильного данного тега на смарфонах будут проблемы с горизонтальным скроллом (которого там быть не должно а он будет)

    теги [User] проставились сами))) они конечно не нужны
     
    Last edited by a moderator: Jun 6, 2014
  4. OlegM
    Offline

    OlegM Russian Joomla! Team Staff Member

    Joined:
    Apr 12, 2007
    Messages:
    4,310
    Likes Received:
    375
    Gender:
    Male
    Оффтопик (не в тему) - жми сюда!
     
  5. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Staff Member

    Joined:
    Sep 1, 2011
    Messages:
    1,963
    Likes Received:
    168
    Gender:
    Male
    "Голые" media queries уже давно никому не нужны.
    Они не умеют определять физический размер экрана. А руководствоваться разрешением девайса для отображения шаблона в разных видах - бредово... Например, у многих не топовых ноутбуков разрешение экрана как на многих современных смартфонах.
    Так что Яндекс.детектор в помощь :) Он определяет модель и производителя устройства. Ну а потом, через условия, например, в PHP, можно подключать файлы с разными стилями...
     
  6. OlegM
    Offline

    OlegM Russian Joomla! Team Staff Member

    Joined:
    Apr 12, 2007
    Messages:
    4,310
    Likes Received:
    375
    Gender:
    Male
    Как категорично то :) Не говори за всех, говори за себя.

    Ты делаешь CSS под каждую модель каждого производителя?

    Из описания Яндекс.Детектора:
    Где здесь физический размер? Всё то же разрешение экрана. Абыдно, да...
    Зачем вообще нужен физический размер?

    Одним разрешением - да. Поэтому в @media есть и ориентация, и плотность пикселей (device-pixel-ratio). Кстати, последнего в Яндекс.Детектор я не наблюдаю.
     
  7. shure348
    Offline

    shure348 Активист

    Joined:
    Aug 21, 2012
    Messages:
    145
    Likes Received:
    27
    Gender:
    Male
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5)
    and (max-device-width: 480px)
    and (orientation: landscape){ }

    ну и насколько голой выглядит такая медиа?
     
  8. AKopytenko
    Offline

    AKopytenko Russian Joomla! Team Staff Member

    Joined:
    Sep 1, 2011
    Messages:
    1,963
    Likes Received:
    168
    Gender:
    Male
    Плотность пикселей? ?:\
    Я не в теме.
    Я отстал :(
     

Share This Page

Loading...