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

Question

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

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

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

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

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

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

60

ipad safari rendering variations

Источник

user6144 09 июн '10 в 14:12

17 ответов

Другие вопросы по тегам ipad safari rendering variations

user271353 10 июл '10 в 01:42 2010-07-10 01:42 · Answer 1 · 2010-07-10 01:42

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

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

В общем. Относитесь к нему как к уменьшенному iPhone, а не к уменьшенному рабочему столу.

user331791 17 мар '11 в 19:39 2011-03-17 19:39 · Answer 2 · 2011-03-17 19:39

Смещение jQuery () не работает: http://bugs.jquery.com/ticket/6446

4

Источник

user331791 17 мар '11 в 19:39

user413862 30 авг '10 в 21:05 2010-08-30 21:05 · Answer 3 · 2010-08-30 21:05

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

iPhone

user12850 16 июн '10 в 15:27 2010-06-16 15:27 · Answer 4 · 2010-06-16 15:27

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

Только что был пойман с позиции: исправлена проблема моей самости

4

Источник

user12850 16 июн '10 в 15:27

user6144 11 июн '10 в 14:31 2010-06-11 14:31 · Answer 5 · 2010-06-11 14:31

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

3

Источник

user6144 11 июн '10 в 14:31

user431965 19 ноя '10 в 13:45 2010-11-19 13:45 · Answer 6 · 2010-11-19 13:45

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

В Google не так много об этом (пока).

3

Источник

user431965 19 ноя '10 в 13:45

user584440 06 июн '11 в 11:22 2011-06-06 11:22 · Answer 7 · 2011-06-06 11:22

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

3

Источник

user584440 06 июн '11 в 11:22

user1090359 29 май '15 в 19:06 2015-05-29 19:06 · Answer 8 · 2015-05-29 19:06

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

2

Источник

user1090359 29 май '15 в 19:06

12 янв '12 в 10:59 2012-01-12 10:59 · Answer 9 · 2012-01-12 10:59

Кажется, есть ошибка в 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%;

слева и справа слой исчезает.

user204606 21 дек '11 в 06:00 2011-12-21 06:00 · Answer 10 · 2011-12-21 06:00

Кроме того, не поддерживает полосу прокрутки в 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>

user236490 26 дек '10 в 02:59 2010-12-26 02:59 · Answer 11 · 2010-12-26 02:59

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

1

Источник

user236490 26 дек '10 в 02:59

user1118259 27 дек '11 в 20:45 2011-12-27 20:45 · Answer 12 · 2011-12-27 20:45

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

user201027 14 окт '10 в 14:34 2010-10-14 14:34 · Answer 13 · 2010-10-14 14:34

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

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

1

Источник

user201027 14 окт '10 в 14:34

user912362 25 авг '11 в 14:44 2011-08-25 14:44 · Answer 14 · 2011-08-25 14:44

24-битные прозрачные PNGS над определенным размером файла не отображаются на iPad2.
Однако я могу получить 8-битные с одинаковыми размерами для рендеринга.
Я не выяснил, что это за максимальный размер файла, чтобы заставить их отображать.

1

Источник

user912362 25 авг '11 в 14:44

user1054356 28 ноя '11 в 23:02 2011-11-28 23:02 · Answer 15 · 2011-11-28 23:02

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

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

user846348 04 янв '12 в 10:08 2012-01-04 10:08 · Answer 16 · 2012-01-04 10:08

position: fixed;

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

0

Источник

user846348 04 янв '12 в 10:08

user6144 22 июн '11 в 13:20 2011-06-22 13:20 · Answer 17 · 2011-06-22 13:20

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

0

Источник

user6144 22 июн '11 в 13:20