86

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

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

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

4

10 回答 10

49

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

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

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

于 2013-03-19T17:47:05.670 回答
29

编辑 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)谷歌它/互联网搜索它

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

浏览器设备模式

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

选择此选项后,GUI 将更改并提供选择要模拟的设备的选项(在 Chrome 中位于顶部 - 选择选项“设备”),选择设备后,通常建议刷新页面以确保模拟器的准确性。
chrome 设备模式 - 设备选择选项

于 2014-10-11T11:48:50.873 回答
25

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

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

谷歌浏览器模拟模式

Internet Explorer还具有设备仿真模式。F12,然后 CTRL+8。它不像 Chrome 移动设备仿真那样直接,但允许您模拟地理位置:

Internet Explorer 仿真模式

于 2014-02-26T03:53:37.760 回答
11

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

它具有真实尺寸和虚拟键盘(这是最重要的),缩放事件......

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

于 2016-08-02T08:42:12.430 回答
3

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

于 2013-03-19T17:46:55.747 回答
2

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

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

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

于 2013-03-19T17:50:54.307 回答
1

XCode确实带有适用于 iPad 和 iPhone 的模拟器。

您还可以在 OS X 上使用 Safari 来调试iOS 设备上的网站。

于 2013-03-19T17:48:40.873 回答
0

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

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

于 2013-07-01T20:10:21.383 回答
0

您可以在 Chrome 上使用Ripple 模拟器。

于 2013-11-10T22:20:19.700 回答
-2

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

于 2017-02-09T10:09:17.580 回答