Список известных "Safari on iPad" отличается от "Desktop Safari"

В последнее время тестирование веб-приложения на настольных браузерах Windows/Mac, а затем на iPad, я заметил различные различия в Safari, которых я не ожидал. даже если версия # одинакова.

Я хотел бы составить список этих различий (для себя и других), чтобы иметь ссылку на разработчика.

например. в Safari на iPad

iPad Safari полностью контролирует стиль выбора/стиля
iPad открывает экранную клавиатуру, когда элемент ввода получает фокус, поэтому встроенные виджеты с плавающим календарем (и т.п.) могут работать не так, как ожидалось (или их нужно изменить).
iPad Safari не поддерживает position:fixed как рабочий стол Safari < iOS 5
iPad Safari (аналогично iPhone/iPodTouch Safari) автоматически связывает 10-значное число, чтобы предлагать варианты телефона #/контакта
iPad Safari prompt('long message...','default'); показывает только одну строку сообщения (хотя она обеспечивает прокрутку сообщения

Я слышал от других, что некоторые JavaScript не работают и т.д. и т.д., но я еще не полностью его протестировал, поэтому буду благодарен за любые открытия, которые вы, возможно, встретили.

Ответ 1

Еще несколько для вас:

Без вспышки
Поддержка Lousy iFrame (так что facebook как и т.д. нуждается в индивидуальной реализации для iPad).
Незначительные ограничения кэширования
HTML textAreas не получает полосу прокрутки (вам нужно сделать двойной палец - что, конечно, удивительно интуитивно понятно)

В общем. Рассматривайте его как увеличенный iPhone, а не уменьшенный рабочий стол.

Ответ 2

Я подумал, что это может быть полезно: Руководство Apple по подготовке веб-контента для iPad

Только что уловлено положением: исправлена проблема моего самоуправления

Ответ 3

Safari на iPad имеет ту же проблему с шириной/заполнением кнопок, как на iPhone

iPhone <button> padding unchangeable? описывает эту проблему и решение для удаления прокладки на кнопке с текстом, но это не поможет вам, если вы хотите, чтобы кнопка была уже, чем сама прокладка (например, для кнопки, которая имеет только небольшую значок на нем). Для этого мне пришлось окружить кнопку внешним элементом с определенной шириной и переполнением: скрытым следующим образом:

<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
    <button style="-webkit-appearance: none; border-width: 0">&nbsp;</button>
</span>

(синяя рамка должна показывать, где находится кнопка, это не критично для взлома)

Ответ 4

jQuery offset() не работает: http://bugs.jquery.com/ticket/6446

Ответ 5

Также похоже, что у iPad Safari есть проблемы с элементами с overflow:auto;, поэтому в нем должны отображаться полосы прокрутки (тестовая страница с div и iframe).

Ответ 6

У iPad Safari, кажется, есть проблемы с обработкой фоновых изображений в редких случаях, показывая странные линии нижнего содержания.

В Google этого еще не так много.

Ответ 7

iPad-браузер не поддерживает загрузку файлов (даже если он поддерживает его, он будет бесполезен, поскольку у iPad нет стандартного браузера файлов). Поле файла появляется с кнопкой "Выбрать файл", выделенной серым цветом.

Ответ 8

Помимо поддержки полосы прокрутки в TextAea, кажется, что мы можем использовать javascript для автоматического выбора текста в TextArea. Этот код будет перемещать курсор только до конца текста в TextArea.

<div>
  <textarea id="text-embed-code" autocapitalize="off" multiline="">
There is a fox running after chrome.
  </textarea>
  <button onclick="testSelectText(event);">select text</button>
</div>
<script>
  function testSelectText(e) {    
    var box = document.getElementById("text-embed-code");
    box.select();
    e.preventDefault();
    return false;
  }
</script>

Ответ 9

Кажется, что ошибка в iPad Safari, где элемент CSS с фоновым изображением и фоновым цветом отображается с небольшой границей цвета фона. Он должен заполнить фоновое изображение до края визуализируемого элемента.

У меня была такая же ошибка на моем сайте, когда вы пытались просмотреть ее на Ipad. Структура HTML похожа:

<div class="main"> <!-- background-color: white -->
   <div class="left"></div> <!-- background-image: url(some_transparent_png) -->
   <div class="content">...</div>
   <div class="right"></div> <!-- background-image: url(some_transparent_png) -->
</div>

Левый слой использует фоновое изображение, тогда как основной слой использует только фоновый цвет. Вид Ipad показывает небольшую границу на краю левого и правого слоев.

Когда я добавляю

 -webkit-background-size: 100% 100%;

влево и вправо, граница исчезает.

Ответ 10

Теперь вы можете управлять стилем списков выбора на iOS, сбросив его с помощью -webkit-appearance: none;

Ответ 11

Это правило фиксирует мерцание анимации в Safari на устройствах iOS:

body {-webkit-transform:translate3d(0,0,0);}

Ответ 12

В iPad Safari появляется ошибка, в которой элемент CSS с фоновым изображением и цветом фона отображается с небольшой границей цвета фона. Он должен заполнять фоновое изображение до края отображаемого элемента.

Ответ 13

24-битный прозрачный PNGS ВЫШЕ УМЕРЕННЫЙ РАЗМЕР ФАЙЛА не отображаются на iPad2.
Однако я могу получить 8 бит тех же размеров для рендеринга.
Я не узнал, что такое максимальный размер файла, чтобы заставить их визуализировать.

Ответ 14

В настоящее время я работаю над небольшим отзывчивым веб-приложением, которое активно использует iframe-апию iframe. По-видимому, версия Safari для ipad не поддерживает несколько методов html5, которые я использую в этом проекте.

Одним из них является window.postMessage, который является способом взаимодействия со сценариями на других страницах, например, a script, который используется "внутри" этого iframe. Автовоспроизведение видео также не работает.

Ответ 15

Проблемы с кадрами. iPad Safari будет скрывать полосы прокрутки и расширять рамки до размера их содержимого. Изменение тега фрейма на включение scrolling="yes" и noresize="noresize" означает, что ничего не делает. Некоторые сайты отлично смотрятся на все, даже браузер Dreamcast, но не на iPad. Проблема может быть исправлена с использованием таблиц и iframe вместо обычного набора фреймов (cols и rows и т.д.).

Ответ 16

Я также обнаружил, что contenteditable не поддерживается в мобильном сафари, поэтому использование простой textarea - лучшая ставка. Apple Developer Docs

Ответ 17

position: fixed;

Не работает в iOS 4, но работает на iOS 5.