在 iOS 模拟器上测试 Web 应用程序

Question

我正在尝试针对 iPad 优化我的网站。您能否指导我采用最佳方法：

1. 关于我应该仅通过 CSS 分隔桌面/ipad 还是重定向到完全不同的域（例如 mysite.com/ipad）

2. 如何在 iPad 模拟器上进行测试？我应该使用 XCode 进行开发吗？

请帮助我提供一些好的在线教程。谢谢。

Answer 1

进入 iOS 模拟器后，转到“硬件 > 设备 > iPad”

Answer 2

最好使用单独的 css 文件或只制作完整的流动布局，

就测试而言，您可以下载 ipad dev kit 和 xcode for the emulator

Answer 3

这个在线 iPad 模拟器 http://alexw.me/ipad2/ 将允许您使用 CSS3 和 javascript 测试您的页面。

Answer 4

你试过Browshot.com吗？您可以获得免费积分并在 iPad 浏览器上尝试一些屏幕截图。它使用实际的移动浏览器。

Answer 5

适用于希望使用VirtualBox 在macOS 中运行iOS 模拟器的Windows 和Linux 用户。

当前软件版本：

1. MacOS 10.14 莫哈韦沙漠；
2. 虚拟盒子 5.2.22;
3. Xcode 10。

参考：

1. 向导：How to Install macOS 10.14 Mojave on VirtualBox on Windows?.

准备 VirtualBox：

1. Download VirtualBox for your OS;
2. Download VirtualBox x.x.xx Oracle VM VirtualBox Extension Pack (one for all OSs);
3. 安装VirtualBox + Extension Pack（通常通过双击->操作系统应该识别Extension Pack必须由VirtualBox打开）；
4. Download VirtualBox's Virtual Disk with preinstalled MacOS 10.14 Mojave
5. 打开VirtualBox;
6. 使用an existing virtual hard disk file 创建一个新的虚拟机；
7. [TIP] 如果您不知道如何配置虚拟机，请按照参考指南的Step 5. Customizing Virtual Machine’s Preferences 中的说明进行操作。最重要的是给 MacOS 至少 2 个 CPU 核心；
8. 我们需要设置一些配置。将下面的 "Virtual Machine Name" 替换为您在第 6 步中创建虚拟机时使用的名称：

对于Windows 用户，我们需要在命令行中输入下一行（逐行）：

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

对于Linux 用户只需创建一个文件，例如myscript，内容如下：

#!/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

并在终端中以source ./myscript 运行它。

在 VirtualBox 上安装 macOS 10.14 Mojave（来自指南的Step 7. Install macOS 10.14 Mojave on VirtualBox）：

1. 打开VirtualBox，启动创建的虚拟机；
2. 等待几秒钟，直到代码面板和苹果徽标消失；
3. 在欢迎屏幕上，选择您所在的国家并选择继续；
4. 选择您的键盘布局；
5. 选择，不传输任何信息类型，点击继续；
6. 决定是否使用 Apple ID 登录；
7. 同意条款和条件；
8. 为 macOS Mojave 10.14 创建一个帐户；
9. 为您的 Mac 设备选择外观，无论是浅色模式还是深色模式；
10. 在快速设置窗口中选择继续；
11. 等待几秒钟，直到您的 Mac 设置好使用。

安装 iOS 模拟器：

1. 安装Xcode（点击右上角蓝色下载，提供您的Apple ID，您将被重定向到App Store）；
2. 打开Xcode（来自App Store或来自Finder -> Applications -> Xcode）；
3. 选择Get started with a playground + Blank 以跳过所有烦人的步骤。

测试站点 + 使用模拟器：

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

   1.1。打开Xcode;

   1.2。在顶部菜单中选择Xcode -> Open Developer Tool -> Simulator;

   1.3。 [TIP] 可以Keep in Dock模拟器，不需要每次都运行Xcode；

   1.4。在顶部菜单中选择Hardware -> Device选择设备/iOS进行模拟；

   1.5。 [提示] 在顶部菜单中选择Hardware -> Manage Devices... + Simulators 选项卡以安装其他版本的iOS 包；

   1.6。在Simulator's iOS Safari 中打开您的网站；

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

   2.1。打开桌面 Safari；

   2.2。在顶部菜单中选择Safari -> Preferences... + Advanced 标签 -> 勾选Show Develop menu in menu bar;

   2.3。在顶部菜单中选择Develop -> SIMULATED DEVICE -> YOUR SITE。