Официальный сайт движения «Москва без Лужкова!»
Главная Новости Москвы Наши новости Популярное
  • Новости
  • Новости
  • ВХОД В ЛИЧНЫЙ КАБИНЕТ
    логин
    пароль
       
      Где купить переходник на фотоаппарат

      Я решила попробовать заработать в интернете на фотографиях, и приобрела хороший фотоаппарат. Спустя некоторое время я захотела снимать мелкие объекты, например песчинки песка или капельки воды. Но

      Уборка квартир в москве
      Проф уборка квартир в москве позволяет не беспокоиться о кавардаке, который повстречает Вас либо Вашу вторую половинку. Если Вы закатывали гулкую вечеринку, а на утро остались совершенно одни, то конкретно

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

    Новости

    Адаптація сайту на мобільних пристроях

    1. Ширина сайту на екранах мобільних пристроїв
    2. Висота сайту на екранах мобільних пристроїв
    3. Масштабування сайту на екранах мобільних пристроїв
    4. підсумок
    5. Читайте також

    Для перегляду на мобільних пристроях, використовується метатег viewport. Він повідомляє браузеру, яким чином потрібно контролювати відображення сайту на мобільних пристроях (до них так само відносяться і планшетні комп'ютери).

    Цей метатег вставляють в контейнер head вашого сайту.

    Див. Приклад.

    <Meta name = "viewport" content = "width = device-width">

    За замовчуванням мобільні браузери відображають сторінку сайту точно так само як і в ПК. Що природно псує зовнішній вигляд сайту і робить мало придатним для використання сайту на мобільних пристроях.

    Для більш детальної настройки відображення використовуємо додаткові значення

    Ширина сайту на екранах мобільних пристроїв

    Дозволяє адаптувати ширину сайту під ширину екрану пристрою

    <Meta name = "viewport" content = "width = device-width">

    Це звичайно кілька покращує перегляд сайту, але тільки в плані того що ширина сайту стає такою ж як і ширина екрану мобільного пристрою. Зате робить зовсім не читабельні сторінки тому дуже сильно зменшує текст, картинки і т.п. А так же порушує модульну сітку сайту.

    Для того що б зробити сайт ще і читабельний, задамо фіксовану ширину відображення сторінки і вже при цій ширині будемо в стилях правити відображення текстів, блоків і т.д. На нашому прикладі візьмемо за основу ширину сайту 600пікселей

    <Meta name = "viewport" content = "width = 600">

    А в css шаблону впишемо правило медізапроса при якому будуть застосовуватися стилі при ширині екрану 600пікселей. А так як ми задали саме цей дозвіл для відображення на екранах в мобільних пристроях, то будуть використовуватися стилі зазначених в заданих нами правилах. Загальні стилі будуть застосовуватися так само як і на звичайному моніторі, але якщо ми якісь стилі вказали в правилах, то ці стилі будуть замінюватися дефолтними.

    Потрібно ще враховувати ту обставину що задавши фіксовану ширину відображення контенту ми отримаємо однаковий результат на різних дозволах екрану. Але все одно при будь-якому дозволі самого екрану сторінка буде відображатися на весь екран. Це дасть нам дві основні переваги.

    • Ми отримаємо однакове відображення на різних дозволах екранів
    • Нам потрібно міняти стилі тільки для цього медізапроса, а не підлаштовувати під кожний дозвіл екрана

    @media screen and (max-width: 600px) {...}

    Висота сайту на екранах мобільних пристроїв

    У деяких мобільних браузерах при інтерполяції сторінки сайту висота сайту відображається некоректно.

    Для виправлення цієї помилки ми можемо використовувати правило

    <Meta name = "viewport" content = "height = device-height">

    Масштабування сайту на екранах мобільних пристроїв

    За допомогою цього правила ми можемо дозволяти або забороняти мастабірованіе сторінки сайту.

    дозволити

    <Meta name = "viewport" content = "user-scalable = yes">

    заборонити

    <Meta name = "viewport" content = "user-scalable = no">

    підсумок

    І так ми створили свій viewport і так само для нього створили медіапзапрос

    У наш медіазапросе створили необхідні для нас стилі. Що у нас вийшло бачимо на рис.3 або по засланні (Заходимо з мобільних пристроїв)

    viewport

    <Meta name = "viewport" content = "height = device-height, width = 600, user-scalable = yes">

    медіазапрос

    @media screen and (max-width: 600px) {body {font-size: 1.5em; } ... ... ... ... h2 {font-size: 2.5em; }}

    рис.1 Відображення сайту без метатега viewport рис

    рис.2 Відображення сайту з атрибутом width = device-width рис

    рис.3 Відображення сайту з атрибутом width = 600 рис

    Читайте також

    1. Фреймворк для адаптивної верстки
    2. Адаптивна верстка для мобільних пристроїв

    Додати коментар


     

    Найди свой район!

    Восточный

    Западный

    Зеленоградский

    Северный

    Северо-Восточный

    Северо-Западный

    Центральный

    Юго-Восточный

    Юго-Западный

    Южный

    Поиск:      


     
    Rambler's Top100
    © 2007 Движение «Москва без Лужкова!»