logo标签列表

iPhone/iPad 浏览器模拟器？

iphoneiosxcodeipadios-simulator
91

我需要在Windows桌面上查看我的网页在iPhone和iPad上的外观。这可行吗？

进行了快速搜索，发现了一些iPhone测试网站，看起来像是我想要的。然而，当我将它们与我自己的iPhone进行比较时，它们非常不准确！我真的需要尽可能接近100％准确的东西。

XCode是否有一个100％准确的模拟器？我知道我需要一台Mac才能运行XCode...

10个回答
51

Xcode自带的iPhone / iPad模拟器包含Safari。如果在模拟器中运行Safari，则可以查看您的网站，并且它应该与在实际设备上的显示效果相同。这对于一般布局测试可能有效。但由于这是一个模拟器，因此可能并不是每个功能都与使用真实iOS设备完全相同。

如果您正在编写网站并需要验证其在特定设备上的外观，则需要在该实际设备上测试您的网站。使用真正的硬件进行测试是做生意的一部分。

是的，您需要一台Mac才能运行Xcode。

5
我有一个后续问题。在我的移动网络应用上，有一个 CSS 布局问题......只在 iOS 设备上才能重现。在线 iPhone 模拟器无法重现它。不幸的是，从你的 iPhone Safari 浏览器调试 CSS 问题几乎是不可能的（我认为）。你有什么建议吗？ - Cameron Askew
24
是的，运行Xcode需要一台Mac电脑。或者搜索"iatkos virtualbox"。 - TvdH
4
您可以通过Safari在OSX上进行网页检查：开发菜单-> iOS模拟器-> 点击选择。 - Harrison Powers
“使用真实硬件进行测试是开展业务的必要成本。” <-- 完全同意.. /(·_·)\ - p._phidot_
5
“Testing with real hardware is part of the price of doing business.” - 直到更好的解决方案出现，这也是问题的关键所在。毕竟，已经有模拟器存在了。 - OG Sean
34

编辑于2023年：这些大多只是为了测试分辨率等内容，其中一些甚至已过时。不幸的是，移动浏览器开发在桌面端（尤其是苹果）方面出现了问题，因此无法真正用这些方法来“模拟”真实的手机。

要模拟真实的手机，通常最好的选择是下载一个桌面应用程序。对于Windows来说，通常是付费/免费试用（与提供虚拟/远程设备的在线服务类似），在Mac上则使用Xcode（但我怀疑Mac用户会寻找这个问答）。

我最近发现的一个免费在线易于使用的工具是Appetize.io，它似乎能够根据网络真实地渲染屏幕，但老实说，我没有深入研究它是否也具有与真实iOS相同的功能和缺失的功能。

其他方面可通过搜索：“用于测试的虚拟iOS设备”

建议：
在发布之前，始终在真实设备上进行测试 :)

我遇到过一些情况，即使是在两部iPhone上，iOS本身的行为也不同...
在线模拟器/仿真器我使用的有：
1）recombu - 似乎已经消失（或者至少资源已经消失）
很好的模拟器，与调整浏览器窗口大小以适应手机尺寸不同，它的行为与智能手机相同。不要被Safari中无法编辑地址栏所困惑 - 只需打开开发者工具（通常是F12），将iframe的源URL重写为你自己的URL。 链接：http://recombu.com/mobile/interactive/ios7-demo/ 2）responsimulator - 似乎只是将页面嵌入iframe 看起来像recombu一样工作，但你可以通过文本输入直接打开URL，并且可以进行缩放。 链接：http://www.responsimulator.com/ 3）transmog - 似乎已经消失

这个看起来像是处理网页的，但它模拟的是旧版iPhone - 有时候还是很方便的。
链接：http://transmog.net/iphone-simulator/mobile-web-browser-emulator.php

X) 搜索一下（除了stackoverflow之外）

这可能听起来有点无聊，但这些模拟器/仿真器就像春天和冬天一样来来去去，所以要经常检查是否有新的东西 - 例如搜索查询：

  • "用于测试的虚拟iOS设备"
  • "在线iPhone模拟器"
  • "虚拟iOS"

浏览器设备模式 - 仅限分辨率测试

如果你打开浏览器的开发者工具（在Chrome中按F12），可能会有一个切换设备模式的选项（在Chrome中是左上角的小智能手机图标）。
chrome device mode icon

选择此选项后，GUI界面将会变化，并提供选择要模拟的设备的选项（在Chrome中位于顶部 - 选择“设备”选项），选择设备后，通常建议刷新页面以确保模拟器的准确性。
chrome设备模式 - 设备选择选项
13
请评论在您投反对票的时候 :) 每个人都有改进的空间 :) - jave.web
10
测试分辨率是很好的，但无法模拟真实设备。库/框架在浏览器和移动设备中表现不同，有时你的网站可能完全无法工作 - 差别就在这里。 - Ricky Levi
2
这是我在这里遇到的最好的信息研究文章之一。继续保持！[^_^]/ - p._phidot_
1
这些都不是真正的模拟器，也没有一个能够正常工作。 - Marc Compte
1
@MarcCompte 确实，自那时以来，我已经更新了更精确的信息和一些额外的内容。 - jave.web
24

现在谷歌浏览器(Chrome)和火狐浏览器(Firefox)都有内置的模拟器。它们虽然不完美，但足以让你在测试实际设备之前完成大部分工作。最好的部分是，如果你喜欢浏览器的开发者工具(Chrome, Firefox)，你可以在模拟模式下使用它们。

获取模拟器：按[Ctrl + Shift + M]，然后选择你要模拟的设备。如果你有任何依赖于页面加载时执行的脚本，可能需要刷新页面。

Google Chrome Emulation mode

Internet Explorer(IE)也有设备模拟器。F12，然后按CTRL+8。虽然不像 Chrome 移动设备模拟器那么简单，但可以模拟地理位置：

Internet Explorer Emulation mode

5
模拟器在排版方面似乎基本上没有问题，但它能够播放一些HTML5音频，而我无法让任何真正的iOS设备播放。所以：结果因人而异。 - skybondsor
31
Chrome模拟器似乎有很多选项，但我从未成功地让它正确地模拟iOS浏览器。尽管如此，我的大部分使用都是与画布相关的，所以结果可能因人而异。 - FreeAsInBeer
6
这还远非完美。例如，旧版 iOS 设备存在视口单位支持出现故障的问题，但我无法在模拟器中复现这个问题，尽管它在旧版 iPad 和 iPhone 上明显可见。 - amergin
66
这不是一个模拟器，它只是使用 Chrome 引擎进行大小调整和触摸操作。 - Cerbrus
28
请停止对这个问题进行投票，因为它是错误的！响应式设计模式不是仿真！ - Wancieho
显示剩余8条评论
13
1
这两个都是基于物理设备而非模拟器。太棒了！ - tanius
1
此外，CrossBrowserTesting还为开源项目提供免费计划。请访问https://crossbrowsertesting.com/open-source。 - tanius
3

您可以在Xcode的模拟器中运行Safari，它应该准确地模拟iPad和iPhone。市场上另一个我听说过好评的东西是Ripple for chrome。

2

在实际设备上进行测试是没有可替代的。

真实设备具有更高的显示密度，意味着像素更小。如果你不在真实设备上进行测试，可能会意识不到设计中包含文字过小无法阅读或按钮过小无法点击的问题。

真实设备要使用手指操作，而非鼠标。这意味着你的点击准确性大大降低，并且你的手指会遮挡你所点的内容。如果不在真实设备上进行测试，可能会发现你的设计存在可用性问题。

1
这是一个无意义的观点。如果你正在进行布局测试、字体行高、字体渲染或不依赖于交互或屏幕密度的更改，模拟器提供了一种更快速的测试这些类型特性的方法。你在这个评论中做出了一些假设。 - Matthew Trow
4
根据我的经验，设计师如果没有在实际设备上测试，很容易期望他们的设计在物理上比实际显示要大。为了得到预期的行高等效果，你需要在设备上进行测试。不管怎样，他问的是如何测试网页，而不是如何测试没有人会与之交互的东西。网页是需要与人交互的，如果你需要测试一张网页，就需要测试这些东西。 - Jim
0

我一直在使用Mobilizer，这是一个非常棒的免费应用

目前它默认模拟Iphone4、Iphone5、三星Galaxt S3、诺基亚Lumia、Palm Pre、黑莓Storm和HTC Evo。 简单直接而有效。

0
1
Ripple模拟器非常烦人，它一直要求重新加载并等待。 - Mahender Reddy Yasa
它不再是最新的，已经过时了。 - LuckyLikey
-2

我使用 mobile-browser-emulator 这个 Chrome 插件，它具有 iPhone 设备类型。它实际上使用用户代理和设备大小来渲染响应式页面。

提供的链接已经失效。 - Epirocks
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接