Метка «mobile developement»

Я хочу рассказать о том, что такое font boosting в мобильных браузерах, к какой неожиданной проблеме он может привести при web-разработке и как с этой проблемой бороться.

Рассмотрим пример из реальной жизни:

Пример 1:

  1. Имеется вновь созданный span с display: inline-block.
  2. Измеряем его ширину в пикселях через свойство offsetWidth.
  3. Меняем его цвет.
  4. И, вдруг, в Google Chrome for Mobile, после изменения цвета ширина элемента резко увеличивается, переставая соответствовать той, что была измерена всего двумя строчками выше!

Показать код

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv = "content-type" content = "text/html; charset=utf-8" />
    <title>Проблема с Font boosting в Google Chrome for Mobile</title>
    <script type = "text/javascript">
      window.onload = function ()
        {
        var spnSpan1 = document.getElementById ("span-1");
        
        alert ("Ширина элемента до изменения цвета: "+ spnSpan1.offsetWidth +"px"); //59px
        spnSpan1.style.color = "red";
        alert ("Ширина элемента после изменения цвета: "+ spnSpan1.offsetWidth +"px"); //186px
        }
    </script>
  </head>
  <body>
    <p>
      <span id = "span-1" style = "display: inline-block;">Элемент</span> 
    </p>

    <!--
    На странице должно быть достаточно текста.
    Если убрать этот абзац, глюк перестанет возникать.
    -->
    <p>
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    </p>
  </body>
</html>

Смотреть пример on-line.

(Для просмотра примеров из этой статьи воспользуйтесь Google Chrome for Mobile или обычным Google Chrome в режиме эмуляции смартфона, например Apple iPhone или Samsung Galaxy Note II).

Причиной такого странного поведения, как раз, и является font boosting.

 

Что такое font boosting

Font boosting — это специальный прием, с помощью которого мобильные браузеры подгоняют размер шрифта под разрешение мобильного устройства. Этот прием нужен из-за того, что многие web-страницы, сверстанные в расчете на десктопные браузеры, содержат текстовые элементы, ширина которых превышает ширину мобильного экрана. Для просмотра этих элементов посетитель вынужден либо использовать горизонтальную прокрутку, либо вписать элемент в размеры экрана, уменьшив масштаб страницы. Однако, при уменьшении масштаба уменьшается также и размер шрифта, делая текст порой совершенно нечитаемым. Так вот, font boosting специально увеличивает размер шрифта, так, чтобы после вписывания блока в ширину экрана, этот размер шрифта соответствовал изначально задуманному.

Степень увеличения размера шрифта при font booting'е зависит от ширины элемента — чем шире элемент, тем сильнее его надо уменьшить, чтобы вписать в размеры экрана, и, соответственно, тем больше надо увеличить размер шрифта для компенсации этого уменьшения.

 

Проблемы font boosting в Google Chrome for Mobile

Реализация font boosting в Google Chrome for Mobile имеет две особенности, которые могут привести к сложнообнаружимым ошибкам при web-разработке:Читать полностью »

Skala Preview — тестируйте дизайн на iPhone во время рисования в PhotoshopМы затрагивали проблему отображения цвета в статье управление цветом и UI дизайн, частично рассказав о замечательном инструменте Skala Preview и его спутнике Skala View. Самое время узнать, что это за зверь и чем он нам полезен. Особенно это касается разработчиков под мобильные устройства Apple. Читать полностью »

Monodroid и Monotouch это фреймворки от xamarin, которые дают возможность разрабатывать приложение на языке C# для Android и iOS соответственно. Так как это относительно новая технология информации в интернете не слишком много (за исключением офф сайта и большого количества тем на stackoverflow.com), на русском языке же я не нашел никаких туториалов и информации вообще.

Что бы устранить это недоразумение решил написать небольшой туториал о том как начать разрабатывать приложения под мобильные платформы при помощи этих фреймворков. В этой статье я рассмотрю только Monodroid.

image
Читать полностью »

image Всем привет!
Несколько месяцев назад мы писали на Xабрахабр. И вот мы снова с вами :) Напомню – мы занимаемся созданием инструментов для сбора и обработки обратной связи пользователей через смартфоны.

И в эти дни мы запускаем на TechCrunch Moscow новую версию нашего продукта.

За прошедшие месяцы мы успели пообщаться с несколькими сотнями разработчиков и предпринимателей, побывать на ряде крупных мероприятий в России и Европе, и даже войти в тройку финалистов Windows 8 Hackathon в Москве. Это было очень увлекательно, и мы получили море обратной связи от вас. Спасибо огромное!

Собрав целый корован данных и проанализировав его, мы сделалами для себя много интересных открытый. Мы поняли, что все разработчики очень разные — у них разные продукты, и им требуются абсолютно разные инструменты для решения их проблем. А то, что предложили мы, подходило небольшой категории приложений и еще меньшему количеству разработчиков.
И мы решили подумать над тем, как бы нам выковать одно кольцо, которое будет править всеми, сделать такой продукт, который поможет большему количеству пользователей стать счастливей, а разработчикам – сытей и богаче ;-)
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js