Список известных отличий «Safari на iPad» от «Desktop Safari» - PullRequest
Новая
       10

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

56 голосов
/ 09 июня 2010

В недавнем тестировании веб-приложения в настольных браузерах 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 не работает и т. Д. И т. Д., Но мне еще предстоит полностью его протестировать, поэтому я буду благодарен за любые открытия, с которыми вы могли столкнуться.

Ответы [ 17 ]

12 голосов
/ 10 июля 2010

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

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

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

4 голосов
/ 16 июня 2010

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

Только что меня застали врасплох: исправлена ​​проблема, моя личность

4 голосов
/ 31 августа 2010

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

iPhone 

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

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

4 голосов
/ 17 марта 2011

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

3 голосов
/ 19 ноября 2010

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

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

3 голосов
/ 06 июня 2011
Браузер

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

3 голосов
/ 11 июня 2010

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

2 голосов
/ 29 мая 2015

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

2 голосов
/ 21 декабря 2011

Кроме того, не поддерживает полосу прокрутки в 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>
2 голосов
/ 12 января 2012
Кажется, есть ошибка в 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%;

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

Страница:
...