iPhone/iPad 浏览器模拟器？ [关闭]

Posted 2023-02-23

【中文标题】iPhone/iPad 浏览器模拟器？ [关闭]

【英文标题】：iPhone/iPad browser simulator? [closed]

【发布时间】：2013-03-08 13:16:59

【问题描述】：

我需要在我的 Windows 桌面上查看我的网页在 iPhone 和 iPad 上的显示效果。这可能吗？

快速搜索了一些 iPhone 测试站点，这似乎是我想要的。但是，当我与我自己的 iPhone 进行比较时，它们非常不准确！我真的需要尽可能接近 100% 准确的东西。

XCode 是否有 100% 准确的模拟器？我知道我需要一台 Mac 来运行 XCode...

【参考方案1】：

Xcode 附带的 iPhone/iPad 模拟器包括 Safari。如果您在模拟器中运行 Safari，您可以查看您的网站，它应该与在真实设备上的显示相同。这可能适用于一般布局测试。但由于它是一个模拟器，因此可能并非每一个功能都与使用真正的 ios 设备完全相同。

如果您正在编写一个网站，并且您需要验证它在给定设备上看起来是否正确，那么您需要在该实际设备上测试您的网站。使用真实硬件进行测试是开展业务的一部分。

是的，你需要一台 Mac 来运行 Xcode。

【讨论】：

我有一个后续问题。我的移动网络应用程序存在 CSS 布局问题……只能在 iOS 设备上重现。在线 iPhone 模拟器不会重现它。不幸的是，从你的 iPhone Safari 浏览器（我认为）调试 CSS 问题几乎是不可能的。你有什么建议吗？

“是的，你需要一台 Mac 来运行 Xcode。” - 或谷歌“iatkos virtualbox”

您可以在OSX上通过Safari查看网页：开发菜单-> iOS模拟器->利润

“使用真实硬件进行测试是做生意的一部分。”

“使用真实硬件进行测试是做生意的一部分。” - 直到出现更好的解决方案，我认为这是问题的重点。毕竟，已经有模拟器了

【参考方案2】：

EDIT 2020：其中大部分基本上只是为了测试分辨率的东西，其中一些甚至已经过时了，可悲的是，移动浏览器的开发与桌面（尤其是在 Apple）并驾齐驱，因此不能正如评论中提到的那样，用这些真正“模拟”一部真正的手机。

要模拟真实的手机，通常最好的选择是下载一个桌面应用程序，对于 Windows，通常是付费/免费增值，在 Mac 上只需使用 Xcode （但我怀疑 Mac 用户正在寻找这个 Q/A） .

我最近发现的免费增值在线好用是Appetize.io，它似乎真的可以根据网络渲染屏幕，但老实说我并没有真正深入研究它是否也有与真正的iOS相同的功能和相同的缺失功能。

忠告：在发布之前，请务必在真实设备上进行测试:)

我遇到过这样的情况，甚至 iOS 本身在 2 部 iPhone 上的行为也不同......

在线模拟器/模拟器我用

1) 重组

精细模拟器 - 不像将浏览器窗口调整为手机尺寸 - 与智能手机一样。不要因为您无法在 safari 中编辑地址栏而感到困惑 - 只需打开开发工具（通常是 F12）并将 iframe 的源 URL 重写为您的。 链接：http://recombu.com/mobile/interactive/ios7-demo/

2) 响应模拟器

看起来像recombu，但你可以直接通过文本输入打开url，你可以放大/缩小。 链接：http://www.responsimulator.com/

3) 幻化

这个似乎处理网页，但它模拟旧 iPhone - 有时仍然很方便。 链接：http://transmog.net/iphone-simulator/mobile-web-browser-emulator.php

X) 谷歌它/互联网搜索它

始终使用谷歌（或其他互联网搜索器）来检查其他模拟器/模拟器和新版本。 链接与示例谷歌搜索这个： https://www.google.cz/search?q=online+iphone+emulator

浏览器设备模式

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

选择此选项后，GUI 将发生变化，并提供选择要模拟的设备的选项（在 Chrome 中它位于顶部 - 选择选项“设备”），选择设备后，通常建议刷新页面以确保模拟器的准确性。

【讨论】：

投反对票时请发表评论 :) 每个人都有改进的空间 :)

测试分辨率很好，但不能模拟真机。 libs/frameworks 对于浏览器和手机的行为不同，有时您的网站根本无法运行 - 就是如此不同

在我在这里遇到的最好的信息研究帖子中.. 继续努力！.. [^_^]/

这些都不是真正的模拟器。

【参考方案3】：

Chrome 和 Firefox 现在都有内置模拟器。它们并不完美，但足够好，几乎可以让您在实际设备上进行测试之前完成所有工作。最好的部分是如果您喜欢浏览器的开发工具（Chrome、Firefox），您可以在模拟时使用它们。

要获得模拟器：[Ctrl+Shift+M] 并选择要模拟的设备。您可能需要刷新页面，尤其是如果您有任何依赖于页面加载时执行的脚本的内容。

Internet Explorer 也有设备仿真模式。 F12，然后 CTRL+8。它不像 Chrome 移动设备仿真那么简单，但允许您模拟地理位置：

【讨论】：

模拟器似乎主要用于布局，但它愿意播放一些我无法让任何真正的 iOS 设备播放的 html5 音频。所以：YMMV。

Chrome 模拟器似乎有很多选择，但我从来没有运气好它甚至接近正确地模拟 iOS 浏览器。我的大部分使用都是在画布上，所以 YMMV。

这远非完美。例如，较旧的 iOS 设备有 buggy viewport units support，但我无法在模拟器中重现该问题，即使该错误在较旧的 iPad 和 iPhone 上清晰可见。

这不是模拟器。这只是使用 chrome 引擎的调整大小/触摸。

请停止投票这个问题，因为它是错误的！响应式设计模式不是仿真！

【参考方案4】：

目前我认为最好的模拟器是https://app.crossbrowsertesting.com

它有真实的尺寸和虚拟键盘（这是最重要的），缩放事件......

https://appetize.io/demo也有同样的东西，但有时间限制。

【讨论】：

这两个都是基于物理设备，而不是模拟器。很棒的发现！

另外，CrossBrowserTesting 提供了一个gratis plan for open source projects。

【参考方案5】：

您可以在 Xcode 的模拟器中运行 safari，它应该可以准确地模拟 iPad 和 iPhone。市场上我听到好评的另一件事是Ripple for chrome。

【参考方案6】：

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

真实设备的显示密度更高，这意味着像素更小。如果您不在真实设备上进行测试，您可能不会意识到您的设计包含太小而无法阅读的文本或太小而无法点击的按钮。

您用手指而不是鼠标使用真实设备。这意味着您点击的准确性要低得多，并且您正在点击的内容会被手指遮挡。如果您不在真实设备上进行测试，您可能不会意识到您在设计中引入了可用性问题。

【讨论】：

这是一个有争议的问题。如果您进行布局测试、字体行高、字体渲染或不依赖于交互或屏幕密度的更改，模拟器提供了一种更快的方法来测试这些类型的功能。您在此评论中做出的假设。

在我的经验中，没有在真实设备上进行测试的设计师期望他们的设计看起来比实际更大，这是非常普遍的。为了获得预期的线高等，您需要在设备上进行测试。无论如何，他问的是如何测试网页，而不是如何测试没有人会与之交互的东西。您与网页交互。如果你需要测试一个网页，你需要测试这个东西。

【参考方案7】：

XCode does come with a simulator 适用于 iPad 和 iPhone。

您也可以在您的 iOS 设备上使用Safari on OS X to debug websites。

【参考方案8】：

您可以在 Chrome 上使用Ripple emulator。

【讨论】：

Ripple 模拟器太烦人了，一直要求重新加载并等待

它不再实现并且已经过时了。

【参考方案9】：

我一直在使用Mobilizer，这是一个很棒的免费应用程序

目前它具有 Iphone4、Iphone5、Samsung Galaxt S3、Nokia Lumia、Palm Pre、Blackberry Storm 和 HTC Evo 的默认模拟。 简单直接有效。

【参考方案10】：

我使用具有 iphone 设备类型的 mobile-browser-emulator chrome 插件。它实际上使用了用户代理和设备大小，在该设备上呈现了基于响应的页面