91

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

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.

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

at.
  • 50,922
  • 104
  • 292
  • 461

10 Answers10

51

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.

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.

rmaddy
  • 314,917
  • 42
  • 532
  • 579
  • 5
    I have a followup question. There's a css layout issue I have on my mobile web app...only reproduce-able on iOS devices. Online iPhone simulators don't reproduce it. Unfortunately, it's virtually impossible to debug a css issue from your iPhone Safari browser (I think). Do you have any suggestions? – Cameron Askew Dec 11 '13 at 02:37
  • 24
    "And yes, you need a Mac to run Xcode." - or google "iatkos virtualbox" – TvdH Mar 19 '14 at 07:51
  • 4
    You can inspect the webpage through Safari on OSX: Develop menu -> iOS Simulator -> profit – Harrison Powers Oct 18 '14 at 01:52
  • "Testing with real hardware is part of the price of doing business." <-- Totally agree.. /(·_·)\ – p._phidot_ Jul 31 '18 at 04:56
  • 5
    "Testing with real hardware is part of the price of doing business." - only until a better solution comes along, which I think is the point of the question. After all, there are emulators already out there – OG Sean Oct 10 '19 at 22:31
32

EDIT 2023: 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.

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

Freemium online easy to use that I found recently is Appetize.io it 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.

For the rest - search: "virtual ios device for testing"

Word of advice:
before release, always test on the real device :)

I've encountered cases when even the iOSes themselves behaved differently on 2 iPhones...

Online simulators / emulators I use

1) recombu - seems to be gone (or at least the assets)

Fine simulator which - unlike resizing 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/

2) responsimulator - seems to just iframe the page

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/

3) transmog - seems to be gone

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

X) search for it (other than stackoverflow)

This may sound dull, but these simulators/emulators come and go as spring and winter, so always check whether there's something new - example search queries:

  • "virtual ios device for testing"
  • "online iphone emulator"
  • "virtual ios"

Browser device mode - resolution test only

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 device mode icon

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.
chrome device mode - device select option

jave.web
  • 13,880
  • 12
  • 91
  • 125
24

Both Chrome and Firefox now 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.

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.

Google Chrome Emulation mode

Internet Explorer also 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 Emulation mode

Matthew Lock
  • 13,144
  • 12
  • 92
  • 130
jiminy
  • 1,612
  • 3
  • 18
  • 21
  • 5
    The emulator seems to be mostly spot-on for layout, but it willingly played some HTML5 audio that I can't get any real iOS device to play. So: YMMV. – skybondsor Mar 09 '14 at 21:32
  • 31
    The Chrome emulator seems to have a lot of options, but I've never had luck with it even coming close to emulating an iOS browser properly. Most of my use with it has been with the canvas though, so YMMV. – FreeAsInBeer Jul 29 '14 at 18:50
  • 6
    This is far from perfect. For instance, older iOS devices have [buggy viewport units support](https://github.com/scottjehl/Device-Bugs/issues/36), but I haven't been able to reproduce the problem in the emulator, even though the bug is clearly visible on older iPads and iPhones. – amergin Jan 16 '15 at 16:23
  • For iphone/ipad simulation I suggest to use safari and adjust the user agent. Chrome is good, but safari is usually closer. Have seen layout differences in testing. – Federico Nov 04 '15 at 05:10
  • 2
    This simulator actually doesn't quite work, cause chrome is a much better browser than the iOS Safari. Many bugs remain hidden. –  Sep 16 '16 at 11:28
  • I wish Safari had this, because the Chrome simulator actually runs my site fine but the iPhone/Safari does not. – User Dec 14 '16 at 21:52
  • 2
    Its not an simulator - it just uses your installed chrome and adjusts the screen size. You can "simulate" how a page looks like on a mobile device but not how it behaves. Meaning the Chrome app for iOS could differ in rendering HTML/CSS or executing Javascript – fabs Jan 12 '17 at 09:36
  • 66
    This isn't an _emulator_. It's just a resize / touch that uses chrome's engine. – Cerbrus Nov 15 '17 at 09:28
  • I can confirm that it doesn't render all elements the same as native iOS safari. I'm currently seeing different rendering styles for some buttons and radio buttons. – Rocky May 22 '18 at 18:54
  • This emulator pretty much seems limited to screen layout. It won't help you if you have, say, a complicated input control that works on the desktop but not on a mobile device. – Paul Kienitz Aug 17 '18 at 00:51
  • 28
    Please stop voting this question up as it is WRONG! Responsive design mode is NOT emulation! – Wancieho Sep 03 '18 at 21:16
13

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

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

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

Başar Söker
  • 606
  • 8
  • 16
  • 1
    Both of these are based on physical devices, not simulators. Great find! – tanius Feb 09 '19 at 14:25
  • 1
    Also, CrossBrowserTesting offers a [gratis plan for open source projects](https://crossbrowsertesting.com/open-source). – tanius Mar 23 '19 at 12:21
3

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.

Mohsin Khubaib Ahmed
  • 1,008
  • 16
  • 32
j_mcnally
  • 6,928
  • 2
  • 31
  • 46
2

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.

Jim
  • 72,985
  • 14
  • 101
  • 108
  • 1
    This is a moot point. If your doing layout testing, font line heights, font rendering or changes that are not dependent on interaction or screen density, a simulator provides a far more rapid approach to testing those types of features. Your making assumptions in this comment. – Matthew Trow Jan 20 '14 at 08:51
  • 4
    It's incredibly common in my experience for designers who don't test on real devices to expect their designs to appear physically larger than they actually do. In order to get the intended line heights etc., you need to test on a device. Regardless, he asked how to test web pages, not how to test something that nobody will ever interact with. You interact with web pages. If you need to test a web page, you need to test this stuff. – Jim Jan 20 '14 at 13:14
1

XCode does come with a simulator for the iPad and iPhone.

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

Mohsin Khubaib Ahmed
  • 1,008
  • 16
  • 32
sosborn
  • 14,676
  • 2
  • 42
  • 46
0

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

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

Corneliu
  • 1,110
  • 1
  • 10
  • 16
pal4life
  • 3,210
  • 5
  • 36
  • 57
0

You can use the Ripple emulator on Chrome.

Louis
  • 2,548
  • 10
  • 63
  • 120
-2

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

Mahender Reddy Yasa
  • 161
  • 7
  • 20