Test Web application on iOS Simulator

Question

I am trying to optimize my website for iPad. Could you please guide me on the best approach:

1. In terms of whether I should separate desktop/ipad just by CSS

Answer 1

For Windows and Linux users who want to run iOS simulator inside macOS using VirtualBox.

CURRENT SOFTWARE VERSIONS:

1. MacOS 10.14 Mojave;
2. VirtualBox 5.2.22;
3. Xcode 10.

REFERENCE:

1. Guide: How to Install macOS 10.14 Mojave on VirtualBox on Windows?.

Prepare VirtualBox:

1. Download VirtualBox for your OS;
2. Download VirtualBox x.x.xx Oracle VM VirtualBox Extension Pack (one for all OSs);
3. Install VirtualBox + Extension Pack (usually by double-clicking -> OS should recognize that Extension Pack must be opened by VirtualBox);
4. Download VirtualBox's Virtual Disk with preinstalled MacOS 10.14 Mojave
5. Open VirtualBox;
6. Create a new Virtual Machine using an existing virtual hard disk file;
7. [TIP] Follow instructions in Step 5. Customizing Virtual Machine’s Preferences of the referenced guide, if you do not know how to configure Virtual Machine. The most important thing is to give MacOS at least 2 CPU cores;
8. We need to set some configurations. Replace "Virtual Machine Name" below by the name which you used in step 6 when you were creating Virtual Machine:

For Windows users we need to enter the next lines (line by line) in a command line:

cd "C:\Program Files\Oracle\VirtualBox\"
VBoxManage.exe modifyvm "Virtual Machine Name" --cpuidset 00000001 000106e5 00100800 0098e3fd bfebfbff
VBoxManage setextradata "Virtual Machine Name" "VBoxInternal/Devices/efi/0/Config/DmiSystemProduct" "iMac11,3"
VBoxManage setextradata "Virtual Machine Name" "VBoxInternal/Devices/efi/0/Config/DmiSystemVersion" "1.0"
VBoxManage setextradata "Virtual Machine Name" "VBoxInternal/Devices/efi/0/Config/DmiBoardProduct" "Iloveapple"
VBoxManage setextradata "Virtual Machine Name" "VBoxInternal/Devices/smc/0/Config/DeviceKey" "ourhardworkbythesewordsguardedpleasedontsteal(c)AppleComputerInc"
VBoxManage setextradata "Virtual Machine Name" "VBoxInternal/Devices/smc/0/Config/GetKeyFromRealSMC" 1

For Linux users just create a file, for example myscript, with a content:

#!/bin/bash
VBoxManage modifyvm "Virtual Machine Name" --cpuidset 00000001 000106e5 00100800 0098e3fd bfebfbff
VBoxManage setextradata "Virtual Machine Name" "VBoxInternal/Devices/efi/0/Config/DmiSystemProduct" "iMac11,3"
VBoxManage setextradata "Virtual Machine Name" "VBoxInternal/Devices/efi/0/Config/DmiSystemVersion" "1.0"
VBoxManage setextradata "Virtual Machine Name" "VBoxInternal/Devices/efi/0/Config/DmiBoardProduct" "Iloveapple"
VBoxManage setextradata "Virtual Machine Name" "VBoxInternal/Devices/smc/0/Config/DeviceKey" "ourhardworkbythesewordsguardedpleasedontsteal(c)AppleComputerInc"
VBoxManage setextradata "Virtual Machine Name" "VBoxInternal/Devices/smc/0/Config/GetKeyFromRealSMC" 1

and run it in a terminal as source ./myscript.

Install macOS 10.14 Mojave on VirtualBox (Step 7. Install macOS 10.14 Mojave on VirtualBox from the guide):

1. Open VirtualBox and start the created Virtual Machine;
2. Wait for some seconds until the codes panel and apple logo go away;
3. On the Welcome screen, select your country and select continue;
4. Select your Keyboard layout;
5. Select, don’t transfer any information type and click continue;
6. Decide to sign in with Apple ID or Not;
7. Agree to the terms and conditions;
8. Create an Account for the macOS Mojave 10.14;
9. Choose a look for your Mac Device, whether it is the light mode or Dark Mode;
10. Select Continue on the Express Set up window;
11. Wait for Some seconds until your Mac is set up for use.

Install iOS simulator:

1. Install Xcode (Click blue Download in the Top Right corner, provide your Apple ID and you will be redirected to App Store);
2. Open Xcode (from App Store or from Finder -> Applications -> Xcode);
3. Select Get started with a playground + Blank in order to skip all annoying steps.

Test Site + Use Simulator:

1. ==============

   1.1. Open Xcode;

   1.2. In the top menu select Xcode -> Open Developer Tool -> Simulator;

   1.3. [TIP] You can Keep in Dock Simulator, so you do not need to run Xcode every time;

   1.4. In the top menu select Hardware -> Device to select device/iOS for simulation;

   1.5. [TIP] In the top menu select Hardware -> Manage Devices... + Simulators tab to install a packages with other versions of iOS;

   1.6. Open your site in Simulator's iOS Safari;

2. ==============

   2.1. Open Desktop Safari;

   2.2. In the top menu select Safari -> Preferences... + Advanced tab -> Tick Show Develop menu in menu bar;

   2.3. In the top menu select Develop -> SIMULATED DEVICE -> YOUR SITE.

Answer 2

best to either use separate css files or just make a complete liquid layout,

as far as testing goes, you can download the ipad dev kit with xcode for the emulator

Answer 3

Have you tried Browshot.com? You can get free credits and try a few screenshots on the iPad browser. It uses an actual mobile browser.

Answer 4

Once you are in iOS simulator, go to "Hardware > Device > iPad"

Answer 5

This online iPad Simulator http://alexw.me/ipad2/ will allow you to test your page along with CSS3 and javascript.