1. Теперь за форумную активность начисляются биткоины и другие криптоденьги. Подробнее.
    Скрыть объявление
  2. Появилась архивная версия форума arhiv.xaker.name, где собраны темы с 2007 по 2012 год.
    Скрыть объявление

Ваяем сайт для "уток" или [Верстка для iPhone]

Тема в разделе "CSS, HTML, JS", создана пользователем хопкинс, 1 июн 2013.

  1. хопкинс
    хопкинс Новичок
    Симпатии:
    35
    Ваяем сайт для "уток" или [Верстка для iPhone]

    Приветствую всех кто читает данную статью)Всем нам известно что время не стоит на месте, а это значит что любому (программисту,верстальщику и т.д) необходимо постоянно получать новые знания. В этой статье я расскажу всякие "няшки" которые необходимы для "МоГуЧеГо ЯбЛоКа"

    P.S Заранее предупреждаю. Я не говорю в этой статье как правильно делать, а как нет. Каждый делает по своему. Я лишь расскажу как можно делать...В надежде на то, что это кому нибудь пригодится.

    Итак. Присаживайтесь поудобнее дамы и господа!

    Шаг первый!​


    В этом пункте я расскажу некоторые особенности iPhone:

    1. Изображения не должны быть слишком большими
    Код:
    Не более 2048 x 1536 px. для iPhone с оперативной памятью до 256 Мб.
    Не более 2592 х 1944 px. для iPhone с оперативной памятью больше 256 Мб.
    2. Adobe Flash не поддерживается.
    3. Кэшируются файлы размером не более 25 Kb.
    4. Не поддерживается работа с файлами с помощью <input type=”file” />.
    5. Могут возникнуть проблемы с использованием внешних шрифтов.
    6. Не работает mouseOver так как нету курсора.
    7. Отлично работает AJAX.
    9. Можно использовать больше шрифтов, рекомендуется шрифт Helvetica.
    10. Можно использовать функцию «звонок по клику»
    Код:
     <a href=”tel:555-555? >Набрать номер: 555-555</a> 
    11. Можно задавать цвета с альфа-каналом для прозрачности.
    Код:
    color :rgba(0,0,0,.50); 
    12. В свойстве background можно указать вывод нескольких картинок. Поможет сайту с картинками более 5 Мп (2592 х 1944).

    Пи.Пи.Си

    Забыл добавить. В айфоне используется мобильная версия браузера safari, к тому же поддерживаются ВСЕ няшки css3 и html5.
    О них вы можете почитать здесь и здесь

    Особенности css


    1. Если сайт оптимизируется под iPhone, то макет сайта должен состоять из одной колонки, а элементы должны растягиваться на 100% ширины.
    2. Не желательно использовать макет многоколоночного сайта.
    3. Для оптимизированного сайта, линеаризуйте все блочные элементы.
    Код:
    div{
      clear:both!important;
      display:block!important;
      width:100%!important;
      float:none!important;
      margin:0!important;
      padding:0!important;
    }
    4. Не нужно делать много элементов на странице. Для маловажных элементов дизайна пропишите свойство:
    Код:
    display: none; 
    5. Шрифт текста можно немного увеличить. Либо использовать свойство -webkit-text-size-adjust , которое автоматически подгонит размер шрифта.
    Код:
    body{
    -webkit-text-size-adjust:none;
    font-family:Helvetica, Arial, Verdana, sans-serif;
    padding:5px;
    }
    6. Не используйте свойство position: fixed; так как фиксированные элементы будут наезжать на нефиксированные.
    7. По возможности замените абсолютные значения на процентные.
    8. Картинки большого размера могут вылезти за края экрана, чтобы избежать этого используйте следующие правила:
    Код:
    img{
          max-width:100%;
          height:auto;
    }
    iPhone обычно масштабирует страницу, и она вся отображается на экране. Из-за этого можно увидеть много радости кривое отображение страницы. Чтобы это исправить можно сделать следующее :
    Код:
    <meta name=”viewport” content=”width=320? />
    <meta name=”viewport” content=”width=320,user-scalable=false” /> 
    Так же как и у всех более менее навороченных звонилок есть две ориентации, горизонтальная и вертикальная.Возможно вам нужно будет подгружать различные css в зависимости от положения звонилки. Для этого можно юзать следующее:
    Код:
    @import url("portrait.css") all and (orientation:portrait);
    @import url("landscape.css") all and (orientation:landscape);
    Или вот так:
    Код:
    @media screen and (orientation:portrait) {
        body { opacity: 1; }
    }
    @media screen and (orientation:landscape) {
        body { opacity: 0; }
    }
    Так же не забудем и про home screen:
    Иконку нужно сделать 57 на 57 пикселей, в корне сайта с названием apple-touch-icon.png.

    Код:
    Если нужно дать другое имя иконки то пропишите тег <link rel=”apple-touch-icon” href=”/customIcon.png”>

    В заключение хочу добавить. Если у вас нет под рукой айфона, то это косяк. Так как все эмуляторы в интернете не дают 100% схожести схожести с браузером iPhone. Вот более менее "правдоподобные"
    Код:
    Тестер верстки под iPhone : http://www.iphonetester.com/
    Тестер верстки под iPad : http://ipadpeek.com/
    Ну а для тех кто немного шарит в php Ждите продолжение статьи)))

    Продолжение
     
    Последнее редактирование: 9 июн 2013
    1 июн 2013
    3 пользователям это понравилось.
  2. Хулиган
    Хулиган Команда форума Продвинутый
    Симпатии:
    242
    весьма не плохо, кстати)
    сам писал то?
     
    2 июн 2013
  3. хопкинс
    хопкинс Новичок
    Симпатии:
    35
    Да. Единственное про "звонок по клику" я не знал. Входе написания случайно наткнулся где-то
     
    2 июн 2013

Поделиться этой страницей

Загрузка...