Как тестировать сайт на совместимость со всеми устройствами

testsite_featured

Из собственного опыта делаю вывод: в среднем за 5-6 лет происходит моральное устаревание компьютерной техники, и она ложится на полку или выбрасывается в мусор. Но всё-таки устройствами выпущенными за последних 5 лет люди пользуются. И качественно сделанный сайт должен нормально на них работать.

Если сейчас 2018 год, то нормальный сайт должен работать на устройствах выпущенных от 2013 года и по сегодня. Подумаем над этим. Если у пользователя Персональный Компьютер, выпущенный в 2013 году, то на нем установлен Windows 7, 8 или 10. На таком компьютере Firefox или Chrome автоматически обновятся до самой новой версии. И проблем с совместимостью не будет.

Ну а что делать с телефонами и планшетами на Adroid или iPhone. Не все пользователи умеют устанавливать Opera, у многих вообще нет профиля в GMail, соответственно Google Play для них недоступен. А встроенный браузер связан с версией операционной системы, и не может быть обновлен на более новый.

Для начала нужно хотя бы протестировать сайт на Adroid и iOs за 2013 год. А потом, при желании, исправить сайт так, чтобы он хорошо работал на этих устройствах.

Сейчас есть возможность тестировать сайты в эмуляторах, чтобы не покупать кучу устройств.

В этой статье я детально распишу процесс установки Android 4.4 на виртуальный компьютер, с нулевыми расходами на программное обеспечение.

После прочтения статьи в Википедии о Android я выяснил, что в 2013 году было выпущено версию 4.4.

Сначала скачаем установочную версию Android x86 4.4 по ссылке ниже:

android-x86-4.4-r5.iso

Теперь нужно установить программу "виртуальный компьютер". Лучшая на данный момент такая программа - это Oracle VirtualBox. Ее базовая версия бесплатная и для частного и для коммерческого применения. Загружаем ее с www.virtualbox.org и устанавливаем.

Запускаем ее и создаем новую виртуальную машину:

  • Тип Linux
  • Версия Other Linux 32 bit
  • Без жесткого диска
new_1

Теперь открываем настройки и указываем:

  • Размер оперативной памьяти 1024Мб
  • Чипсет ICH9
  • Мышка PS/2
  • Включить I/O APIC
2
  • Количество процессоров равное количеству ядер в Вашем компьютере
3
  • Видео память 128 Мб
4
  • Сеть 1 - NAT
  • Сетевой адаптер AMD PCNet FAST III
5
  • Без звуковой карты
6

Теперь создаем новый SATA жесткий диск объемом 4Гб. А также IDE привод для дисков. Вставляем в него файл android-x86-4.4-r5.iso

new_9

Запускаем виртуальную машину. Чтобы вывести мышь из виртуальной машины назад в Windows нужно нажать правый <Ctrl>.

В меню с диска выбираем "Installation - Install Android-x86 to harddisk". Создаем новый раздел на весь размер виртуального жесткого диска. Указываем тип файловой системы ext2.

new_10
new_10_1
11
12
new_11
13
14
new_11_2
new_11_3
new_103

Во всех дальнейших диалогах жмем Yes, кроме "Do you want to intsall EFI GRUB2".

new_12

После окончания установки выбираем Reboot. Выключаем виртуальную машину и достаем диск из виртуального привода.

Опять запускаем виртуальную машину. У нас должен загрузится нормальный рабочий Android.

19
new_101
new_102

Если виртуальная машина "зависнет", то, возможно, она просто перешла в режим ожидания. Чтобы ее пробудить нажмимаем кнопку "Меню":

menu_key

Чтобы выключить виртуальную машину нажимаем: <Right Ctrl> + H

26

Я в своей роботе использую для тестирования две виртуальные машины с разными разрешениями. Одна 1024х768х16, другая 320х480х16. Чтобы смотреть страницы на потенциальном смартфоне и планшете.
Итак, настроим виртуальный Android под разрешение 320х480х16. Выключаем виртуальную машину и запускаем снова в режиме отладки Android:

new_104

Теперь в Windows создаем новый cmd файл с таким содержанием:

"c:\Program Files\Oracle\VirtualBox\VBoxManage.exe" setextradata "android44" "CustomVideoMode1" "320x480x16"
pause

Где "c:\Program Files\Oracle\VirtualBox\VBoxManage.exe" должно содержать Ваш путь к VirtualBox,  а "android44" должно содержать Ваше имя виртуальной машины с Android.

new_109

Запускаем cmd файл. Он должен отработать без ошибок.

new_110

Теперь переходим в виртуальную машину с Android и вводим команды
mount -o remount,rw /
mkdir /mnt/sda1
mount -t ext2 /dev/block/sda1 /mnt/sda1
vi /mnt/sda1/grub/menu.lst

new_106

Нам откроется файл menu.lst в текстовом редакторе vi. Для начала редактирования нужно нажать i. Для сохранения <Esc>:wq

После "androidboot.hardware=android_x86" дописываем "vga=ask"

new_107

После сохранения изменений выполняем:
umount /mnt/sda1

Выключаем виртуальную машину, и включаем снова. После загрузки у нас должен появиться список видео режимов. Находим номер видео режима с разрешением 320x480x16 и вводим его.

new_111

Android загрузится с разрешением 320x480x16

new_108

Чтобы постоянно не набирать номер видео режима, его можно прописать вместо ask в файле menu.lst, но с префиксом 0x (например vga=0x360)

Также, для лучшего тестирования, можно в настройках Android включить экранную клавиатуру.

Аналогичным способом можно устанавливать в виртуальный компьютер более новые версии Android. Установочные образы Android x86 доступны здесь.

В дальнейших статьях напишу о тестировании сайтов под Mac и iPhone.

21 сентября 2017
My photo

Добро пожаловать на мою страницу. Меня зовут Игорь. Я web программист с пятнадцатилетним стажем. Фрилансер. Работаю дистанционно. Выполняю проекты на русском, украинском, английском и польском языках. Проживаю в городе Львов, Украина.