ios iPhone/iPad 浏览器模拟器？

iPhone/iPad browser simulator?

提问by at.

I need to see how my webpages are looking on an iPhone and iPad on my windows desktop. Is this possible?

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

A quick search yielded some iPhone testing sites, which seemed like what I wanted. However, they are wildly inaccurate when I compared against my own iPhone! I really need something that is as close to 100% accurate as possible.

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

Does XCode have a simulator that is 100% accurate? I understand I'd need a Mac to run XCode...

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

采纳答案by rmaddy

The iPhone/iPad simulator that comes with Xcode includes Safari. If you run Safari in the simulator, you can view your website and it should appear the same as it would on a real device. This may work for general layout testing. But since it is a simulator, it is possible that not every single bit of functionality will be exactly the same as using a real iOS device.

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

If you are writing a website and you need to verify that it looks proper on a given device, then you need to test your website on that actual device. Testing with real hardware is part of the price of doing business.

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

And yes, you need a Mac to run Xcode.

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

回答by jiminy

Both Chromeand Firefoxnow have built-in emulators. They aren't perfect but are good enough that can get you almost all of the way before testing on an actual device. The best part is if you like the browser's developer tools (Chrome, Firefox), you can use them while emulating.

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

To get the emulator: [Ctrl+Shift+M] and select the device that you want to emulate. You might have to refresh the page, esp if you have anything that depends on script that executes on page load.

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

Internet Exploreralso has a device emulation mode. F12, then CTRL+8. It's not quite as straight forward as the Chrome Mobile Device emulation, but does allow you to simulate geolocation:

Internet Explorer还具有设备仿真模式。F12，然后 CTRL+8。它不像 Chrome 移动设备模拟那么直接，但确实允许您模拟地理定位：

回答by jave.web

EDIT 2020:Most of these are basically just to test resolution stuff, some of them even outdated, sadly, mobile browser development went sideways with desktop (especially in Apple), therefore one can't really "emulate" a real phone with these as mentioned with comment.

编辑 2020：其中大部分基本上只是为了测试分辨率的东西，其中一些甚至已经过时，可悲的是，移动浏览器的开发与台式机（尤其是在 Apple 中）并驾齐驱，因此人们无法真正用这些“模拟”真正的手机有评论提到。

To emulate real phones, often the best choice is to download a desktop app which, for Windows, is usually paid/freemium, on Mac just use the Xcode one (but I doubt Mac people are looking for this Q/A).

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

Freemium online easy to use that I found recently is Appetize.ioit seems to really render the screen according to network, but honestly I didn't really dig into whether it also has identical features and indentically missing features as real iOS.

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

Online simulators / emulators I use

我使用的在线模拟器/模拟器

1) recombu

1) 重新组合

Fine simulator which - unlikeresizing browser window to mobile phone dimensions- acts same as a smart phone. Don't be confused that you can't edit address bar in safari - just open deveolper tools (usually F12) and rewrite iframe's source URL to yours.
Link: http://recombu.com/mobile/interactive/ios7-demo/

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

2) responsimulator

2) 响应者

Seems to work like recombu, but you can open url directly by text input and you can zoom in/out.
Link: http://www.responsimulator.com/

似乎像 recombu 一样工作，但是您可以通过文本输入直接打开 url，并且可以放大/缩小。
链接：http: //www.responsimulator.com/

3) transmog

3) 幻化

This one seems to process the webpage, but it emulates old iPhone - still handy sometimes.
Link: http://transmog.net/iphone-simulator/mobile-web-browser-emulator.php

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

X) google it / internet search for it

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

Always use google (or other internet searchers) to check for other simulators/emulators and new versions.
Link with example google search for this one:
https://www.google.cz/search?q=online+iphone+emulator

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

Browser device mode

浏览器设备模式

If you open your browser's developer's tools (in Chrome F12), there will probably be an option to toggle device mode (in Chrome it is the little smartphone icon at top-left).

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

After choosing this option GUI will change and will provide option to select device to simulate (in Chrome it is at the top - select option "Device"), after selecting device, refreshing the page is often adviced to ensure simulator's accuracy.

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

回答by rotring05

For now i think best emulator is https://app.crossbrowsertesting.com

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

It has real sizes and virtual keyboard (that is the most important thing) , zooming events...

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

Also https://appetize.io/demohas same things but it has time limit.

此外https://appetize.io/demo具有同样的事情，但它有时间限制。

回答by j_mcnally

You can run safari in Xcode's simulator and it should accurately emulate iPads and iPhones. Another thing on the market that I've heard good reviews for is Ripple for chrome.

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

回答by sosborn

XCode does come with a simulatorfor the iPad and iPhone.

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

You can also use Safari on OS X to debug websiteson your iOS device.

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

回答by Jim

There's no good substitute to testing on an actual device.

没有什么可以替代在实际设备上进行测试的好方法。

Real devices have higher display densities, meaning that pixels are smaller. If you don't test on a real device, you may not realise that your design includes text that is too small to read or buttons that are too small to tap.

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

You use real devices with your fingers, not a mouse. This means that the accuracy of your taps is much lower and what you are tapping is obscured by your finger. If you don't test on a real device, you may not realise you've introduced usability problems into your design.

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

回答by pal4life

I have been using Mobilizer, which is an awesome free app

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

Currently it has default simulation for Iphone4, Iphone5, Samsung Galaxt S3, Nokia Lumia, Palm Pre, Blackberry Storm and HTC Evo. Simple straightforward and effective.

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

回答by Louis

You can use the Ripple emulatoron Chrome.

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

回答by Mahender Reddy Yasa

I use mobile-browser-emulatorchrome plug-in which is has iphone device types. It actually uses user-agent and size of device on which based responsive pages are rendered

我使用具有 iphone 设备类型的移动浏览器模拟器chrome 插件。它实际上使用用户代理和呈现基于响应页面的设备大小