Мені потрібно побачити, як виглядають мої веб-сторінки на iPhone та iPad на робочому столі Windows. Чи можливо це?
Швидкий пошук дав кілька сайтів для тестування iPhone, що здавалося тим, що я хотів. Однак вони надзвичайно неточні, коли я порівнював їх із власним iPhone! Мені дійсно потрібно щось, що наближається до 100% точної, наскільки це можливо.
Чи має XCode симулятор, який є на 100% точним? Я розумію, що мені потрібен Mac для запуску XCode ...
Відповіді:
Симулятор iPhone / iPad, який постачається з Xcode, включає Safari. Якщо ви запустите Safari в симуляторі, ви можете переглянути свій веб-сайт, і він повинен виглядати таким же, як на реальному пристрої. Це може працювати для загального тестування макета. Але оскільки це симулятор, можливо, не кожен біт функціональних можливостей буде точно таким же, як використання справжнього пристрою iOS.
Якщо ви пишете веб-сайт і вам потрібно переконатися, що він виглядає належним чином на певному пристрої, тоді вам потрібно протестувати свій веб-сайт на цьому пристрої. Тестування на реальному обладнанні є частиною ціни ведення бізнесу.
І так, вам потрібен Mac для запуску Xcode.
І Chrome, і Firefox тепер мають вбудовані емулятори. Вони не ідеальні, але достатньо хороші, щоб отримати майже весь шлях перед тестуванням на реальному пристрої. Найкраще, якщо вам подобаються інструменти розробника браузера ( Chrome , Firefox ), ви можете використовувати їх під час емуляції.
Щоб отримати емулятор: [Ctrl + Shift + M] і виберіть пристрій, який потрібно емулювати. Можливо, доведеться оновити сторінку, особливо якщо у вас є щось, що залежить від сценарію, який виконується при завантаженні сторінки.
Internet Explorer також має режим емуляції пристрою. F12, потім CTRL + 8. Це не так просто, як емуляція мобільного пристрою Chrome, але дозволяє моделювати геолокацію:
EDIT 2020: Більшість з них в основному просто для тестування матеріалів з роздільною здатністю, деякі з них навіть застарілі, на жаль, розробка мобільного браузера пішла вбік із робочим столом (особливо в Apple), тому насправді не можна "наслідувати" реальний телефон такими, як згадується з коментарем.
Для емуляції реальних телефонів часто найкращим вибором є завантаження настільного додатка, який для Windows зазвичай є платним / безкоштовним, на Mac просто використовуйте Xcode (але я сумніваюся, що люди Mac шукають ці запитання / відповіді).
Freemium онлайн простий у використанні, який я нещодавно знайшов - Appetize.io, здається, він дійсно робить екран відповідно до мережі, але, чесно кажучи, я насправді не заглиблювався в те, чи має він ідентичні функції та, як правило, відсутні функції, як справжній iOS.
Прекрасний симулятор, який - на відміну від зміни розміру вікна браузера до розмірів мобільного телефону - діє так само, як смартфон. Нехай вас не бентежить те, що ви не можете редагувати адресний рядок у сафарі - просто відкрийте інструменти розробника (зазвичай F12) і перепишіть вихідну URL-адресу iframe на свою.
Посилання: http://recombu.com/mobile/interactive/ios7-demo/
Здається, це працює як recombu, але ви можете відкрити URL-адресу безпосередньо за допомогою введення тексту та збільшити / зменшити масштаб.
Посилання: http://www.responsimulator.com/
Здається, цей обробляє веб-сторінку, але він імітує старий iPhone - іноді все ще зручно.
Посилання: http://transmog.net/iphone-simulator/mobile-web-browser-emulator.php
Завжди використовуйте Google (або інші пошуковці в Інтернеті), щоб перевірити наявність інших симуляторів / емуляторів та нових версій.
Посилання на приклад пошуку Google для цього:
https://www.google.cz/search?q=online+iphone+emulator
Якщо відкрити інструменти розробника веб-переглядача (у Chrome F12), можливо, буде можливість перемикати режим пристрою (у Chrome це маленька піктограма смартфона у верхньому лівому куті).
Після вибору цієї опції графічний інтерфейс зміниться і надасть можливість вибору пристрою для імітації (у Chrome він знаходиться вгорі - виберіть опцію "Пристрій"), після вибору пристрою часто рекомендується оновити сторінку, щоб забезпечити точність симулятора.
На даний момент я думаю, що найкращим емулятором є https://app.crossbrowsertesting.com
Він має реальні розміри та віртуальну клавіатуру (це найважливіше), масштабування подій ...
Також https://appetize.io/demo має те саме, але має обмеження за часом.
Ви можете запустити сафарі в симуляторі Xcode, і воно повинно точно імітувати iPad і iPhone. Ще одна річ на ринку, про яку я чув хороші відгуки - це Ripple для хрому .
Тестування на реальному пристрої не може замінити вас.
Реальні пристрої мають вищу щільність відображення, тобто пікселі менше. Якщо ви не тестуєте на реальному пристрої, ви можете не усвідомлювати, що ваш дизайн включає текст, який замалий для читання, або кнопки, замалі для натискання.
Ви використовуєте справжні пристрої пальцями, а не мишею. Це означає, що точність ваших постукувань набагато нижча, а те, що ви постукуєте, закривається пальцем. Якщо ви не тестуєте на реальному пристрої, ви, можливо, не усвідомлюєте, що внесли проблеми з юзабіліті у свій дизайн.
XCode постачається із симулятором для iPad та iPhone.
Ви також можете використовувати Safari в OS X для налагодження веб-сайтів на вашому пристрої iOS.
Ви можете використовувати емулятор Ripple у Chrome.
Я використовую мобільний браузер-емулятор chrome плагін, який має типи пристроїв iphone. Він насправді використовує агент користувача та розмір пристрою, на якому відображаються адаптивні сторінки