Safari

Настройка таблиц стилей

Хотя настройки окна просмотра, являются важным средством для оптимизации веб-контента для iOS, таблицы стилей представляют дополнительные методы оптимизации. Например, можно использовать iOS CSS расширения для управления изменением размера текста и элементов подсветки. Если вы используете условные CSS, то вы можете использовать эти параметры, не затрагивая того, как другие браузеры отображают веб-страницы.

Опирайтесь на свойства CSS3

Есть много свойств CSS3, доступных для использования в Safari десктоп столе и iOS. CSS свойства, которые начинаются с -webkit- обычно предлагают свойства CSS3 или Apple расширения CSS. Например, вы можете использовать следующие свойства CSS для имитации пользовательского интерфейса iOS:

-webkit-border-image
Позволяет использовать изображение в качестве границ для блока.
  -webkit-border-radius
Создает элементы с закругленными углами.

Настройка размера текста

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

Настройка размера текста важна, чтобы текст был разборчивым, когда пользователь выполняет двойное нажатие. Если пользователь выполняет двойное нажатие на HTML блочный элемент, такой как <div> - Safari на iOS масштабирует область просмотра, чтобы она соответствовала ширине блока в видимой области. Когда веб-странице отображается, Safari на iOS получает ширину блока и определяет соответствующий масштаб текста, чтобы текст был разборчивым.

Если автоматическая регулировка размера текста не работает на веб-странице, то вы можете отключить эту функцию или задать свой собственный масштаб в процентах. Например, текст с абсолютном расположением элементов может выйти за границы окна просмотра после регулировки. Другие страницы, возможно, потребуют несколько небольших изменений, чтобы они выглядели лучше. В этих случаях, используйте CSS свойство -webkit-text-size-adjust для изменения настроек по умолчанию для любого элемента, который отображает текст.

Сравните веб-страницы, показываемые Safari на iOS с -webkit-text-size-adjust установленым в auto, none и 200%. На iPad, значение по умолчанию для -webkit-text-size-adjust none. Для всех других устройств, значение по умолчанию auto.

-webkit-text-size-adjust example

Чтобы выключить автоматическую регулировку текста введите -webkit-text-size-adjust с none, как показано ниже:

html {-webkit-text-size-adjust:none}

Для регулировки масштаба текста на 200% введите:

html {-webkit-text-size-adjust:200%}

Установка этого свойства для различных типов блоков с помощью встроенного стиля в HTML.

<body style="-webkit-text-size-adjust:none">
<table style="-webkit-text-size-adjust:auto">
<div style="-webkit-text-size-adjust:200%">
 

Подсветка элементов

По умолчанию, когда пользователь нажимает на ссылку или JavaScript интерактивный элемент, Safari на iOS выделяет область, в прозрачный серый цвет. Используя -webkit-tap-highlight-color CSS, вы можете либо изменить, либо отключить это поведение по умолчанию на веб-страницах.

Синтаксис задания этого свойства CSS:

-webkit-tap-highlight-color:<css-color>

Это унаследованное свойство, которое изменяет цвет в момент прикосновения, управляя значением альфа. Если вы не укажете значение альфа, Safari на iOS применяет значение альфа к цвету по умолчанию. Чтобы отключить подсветку касания, устанавливаем альфу в 0 (невидимый). Если вы установите альфа в 1.0 (непрозрачный), то элемент не будет виден при касании.

Использование значения альфа 0.4 для пользовательского выделения цветом показанного справа на рисунке ниже:

<html>
<head>
    <meta name = "viewport" content = "width=200">
</head>
 
<body>
<a href = "whatever0.html">default highlight color</a><br><br>
<a href = "whatever0.html" style = "-webkit-tap-highlight-color:rgba(200,0,0,0.4);">custom highlight color</a>
</body>
-webkit-tap-highlight-color example

Вы также можете использовать CSS-свойство -webkit-tap-highlight-color в сочетании с установкой события сенсорного экрана для настройки поведения кнопок, как на десктоп системе. На iOS, события мыши передаются так быстро, что down или active состояние никогда не будет получено. Поэтому псевдо состояние active: срабатывает только тогда, когда установлено событие прикосновения на элемент HTML - например, когда установлено ontouchstart на элементе следующим образом:

<button class="action" ontouchstart="" style="-webkit-tap-highlight-color: rgba(0,0,0,0);">Testing Touch on iOS</button>

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

 
 
homeЗаметили ошибкукарта сайта 
   Made on a Mac