Safari Створення сумісного веб-контенту, Apple, Xcode developer

Створення сумісного веб-контенту

У цьому розділі розглядаються найкращі методи створення веб-контенту, який сумісний із Safari на робочому столі та Safari на iOS. Багато з цих принципів просто покращують надійність, продуктивність, зовнішній вигляд та зручність роботи з веб-сторінкою на обох платформах. Якщо ваша мета iOS, перший крок, це отримати ваш веб-контент добре працює на робочому столі. Якщо ваша мета десктоп, з мінімальними змінами, ви можете отримати ваш веб-контент, що добре виглядає і добре працює також і на iOS.

Використання стандартів

Першим правилом дизайну є використання веб-стандартів. Засновані на стандартах веб-розробки методи забезпечують найбільш послідовний виклад та функціональність у всіх сучасних браузерах, включаючи Safari. Добре зроблений сайт, ймовірно, вимагатиме всього кілька уточнень, щоб добре виглядати та добре працювати на Safari.

Двигун WebKit, що використовується Safari на робочий стіл і Safari на iOS, підтримує всі найсучасніші веб-стандарти, у тому числі:

Уникайте кадрів

Намагайтеся уникати використання складних кадрів, які покладаються на можливість прокручування окремих кадрів, тому що на iOS немає смуг прокручування.

Використовуйте стовпці та блоки

Для сумісності з iOS, використовуйте стовпці та блоки, витрачаючи веб-сторінку, як багато інтернет-газети. Це робить ваш сайт зручнішим для читання, а також працює краще з подвійним натисканням на iOS.

Коли користувач двічі кликає веб-сторінку, Safari на iOS дивиться на елемент, який двічі натиснуто, і знаходить найближчий блок (визначений елементом, таким як

,
    ,
      та) або елементом зображення. Якщо знайдений елемент є блоком, Safari розгортає iOSконтент по ширині екрана, а потім центрує його. Якщо це зображення, Safari iOS розгортає його, щоб помістити зображення, а потім центрувати. Якщо блок або зображення вже збільшено, Safari iOS повертає його назад.

Пам'ятайте про межі iOS ресурсів

Через ліміт пам'яті, доступної на iOS, існують обмеження на кількість ресурсів, які вона може обробляти:

    Максимальний розмір декодованого GIF, PNG і TIFF зображення становить 3 мегапікселі для пристроїв з менш ніж 256 Мб оперативної пам'яті та 5 мегапікселів для пристроїв з більшим або рівним 256 Мб оперативної пам'яті.

Тобто, переконайтеся, що ширина * висота ≤ 3 * 1024 * 1024 для пристроїв менш ніж 256 Мб оперативної пам'яті. Пам'ятайте, що декодований розмір набагато більший за розмір кодованого зображення.

Максимальний декодований розмір для JPEG становить 32 мегапікселі з використанням підвиборки.

JPEG зображення може бути до 32 мегапікселів через вибірку, що дозволяє JPEG зображенню декодуватися до розміру, який має одну шістнадцяту кількості пікселів. JPEG зображення розміром більше, ніж 2 мегапікселі використовує підвибірку, тобто декодується в зменшеному розмірі. JPEG субдискретизація дозволяє користувачеві переглядати зображення з найновіших цифрових камер.

Максимальний розмір елемента canvas складає 3 мегапікселі для пристроїв з менш ніж 256 Мб оперативної пам'яті та 5 мегапікселів для пристроїв з більшим або рівним 256 Мб оперативної пам'яті.

Висота та ширина об'єкта canvas складає 150 х 300 пікселів, якщо не вказано.

Якщо сценарій виконується більше 10 секунд, Safari на iOS припиняє виконання сценарію у випадковому місці у вашому коді,тому це може призвести до непередбачуваних наслідків.

  • Максимальна кількість документів, які можуть бути відкриті одночасно - вісім на iPhone і дев'ять на iPad.

    • Крім того, необхідно, щоб розмір зображення відповідав образу. Не покладайтеся на браузерне масштабування. Наприклад, не ставте 100 х 100 зображення в 10 х 10 елемент. Використовуйте плитку з невеликих фонових зображень, не використовуйте великі фонові зображення.

    Використовуйте вікна та діалоги підтримувані Safari на iOS та уникайте інших.

    Використовуйте типи контенту, що підтримуються, і особливостей iOS

    Використовуйте canvas для векторної графіки та анімації.

    Ви можете використовувати той же об'єкт canvas, який використовується Dashboard віджетами для реалізації складних інтерфейсів для веб-додатків. Об'єкт canvas був введений в Safari 2.0, і приймається іншими двигунами браузерів, а також є частиною специфікації WHATWG.

    Використовуйте HTML5 audio and video елементи

    Використовуйте типи MIME, що підтримуються iOS Rich Media

    Список мультимедійних MIME типів, які підтримуються Safari на iOS. Файли з цими типами MIME і розширеннями файлів можуть бути відтворені на iOS.

    MIME тип Опис Розширення
    audio/3gpp3GPP media3gp, 3gpp
    audio/3gpp23GPP2 media3g2, 3gp2
    audio/aiff

    AIFF audioaiff, aif, aifc, cddaaudio/amrAMR audioamraudio/mp3MP3 audiomp3, swaaudio/mp4MPEG-4 mediamp4audio/mpegMPEG audiompeg, mpg, mp3,swaaudio/wavWAVE audiowav, bwfaudio/x-m4aAAC audiom4aaudio/x-m4bAAC audio bookm4baudio/x-m4pAAC audio (protected)m4pvideo/3gpp3GPP media3gp, 3gppvideo/3gpp23GPP2 media3g2, 3gp2video/mp4MPEG-4 mediamp4video/quicktimeQuickTime Moviemov, qt, mqvvideo/x-m4vVideom4v

    Не використовуйте непідтримувані технології iOS

    Загалом на iOS Safari не підтримуються сторонні плагіни або функції, які потребують доступу до файлової системи. Наступні веб-технології не підтримуються на iOS:

    Події наведення миші

    Користувач не може порушити подію переміщення курсору на nonclickable елемент в iOS. Елемент повинен бути інтерактивним, щоб подія муситьзавершитися.

    Стилі наведення (hover)

    Оскільки подія mouseover посилається перед mousedown подією, hover стилі відображаються, тільки коли користувач стосується інтерактивні елементи зі стилем hover .

    Також, як hover інтерактивні елементи відображають tooltip тільки при їх дотику.

  • QuickTime VR (QTVR) фільми
  • Встановлення плагінів.
  • Користувальницькі x.509 сертифікати
  • WML

    • Safari на iOS не мініатюрний веб браузер, це повнофункціональний веб-браузер, що відображає сторінки, відповідно до дизайногм, - таким чином Safari на iOS, немає потреби в підтримці Wireless Markup Language (WML). Крім того, він підтримує XHTMLмобільний профіль типів документів та сайтів на .mobi доменах.

    XHTML mobile тип документа:

    Сафарі на iOS підтримує можливість завантаження файлів, тобто елементи – на IOS 6 та вище.

    Не пропонуйте користувачеві завантажити такі плагіни, як Flash на iOS.

    За замовчуванням Safari на iOS блокує спливаючі вікна. Однак, користувач може змінювати це в налаштуваннях. Щоб змінити параметри Safari, натисніть Параметри, далі Safari. Блокування спливаючих вікон буде увімкнено в розділі Безпека.