ChatGPT解决这个技术问题 Extra ChatGPT

iPhone Browser simulator for Windows?

Note: This is a question about simulating the Browser on the iPhone, not simulating the whole device. I know that iPhone-device simulation is not possible on Windows, as discussed at length here.

I have a web site that looks really weird when viewed on an iPhone - its some sort of CSS issue.

The same issue does not occur when I view the site in Safari for Windows (or any other Windows browser for that matter).

So, are there any good iPhone Browser simulators that run on windows? I.e. that render a site in the same way that the iPhone browser does.

Bonus points if there's some way of inspecting the CSS in detail, as with Chrome's 'inspect element' developer feature.

edit: for the curious, the rendering problem that I'm trying to solve is described here: CSS background image rendering differently on iPhone


R
Robert Redmond

You can simulate the iPhone user agent in Safari 5 if you set up the Developers menu item in Preferences>Advanced. The webkit engine in Safari 5 is similar to iPhone's browser so most of the HTML 5 stuff works the same. As a bonus the Developer's tab allows you to debug JavaScript and some CSS (not so well supported).


Thats interesting. Yes it lets me set the user-agent string so that the browser pretends to be an iPhone. The rendering engine still seems to behave slightly differently though.
Yeah it is going to behave slightly differently but even the iphone simulator on the Mac behaves differently to the actual phone itself. I've done some dev work in HTML5 for the iphone and Safari 5 is close enough if you take into account the huge performance of your PC versus the phone.
Now that Safari for Windows is dead -- any new recommendation?
Its not an exact view either. It has an entirely different view. Some issues appear on the real phone that dont on the desktop browser with user agent
It only changes window size nothing else. css engine doesn't get simulated.
I
Igor Andrade

I tried all of the options mentioned and didn't like them (basically because they don't show platform-specific components, which is interesting for demonstration purposes).

If this applies for you guys, I'd recommend http://www.browserstack.com/

Unfortunately, it's not free.


A
Amod

[I know the question's quite old now, but maybe my answer might help people coming in with the same query...]

I have found the Google Canary browser's emulator to be one of the best and quickest for testing browser compatibility issues on a windows machine.

It even emulates the iphone's 2x device pixel ratio.

Definitely give it a try and see if it reproduces your issue:

http://www.google.co.in/intl/en/chrome/browser/canary.html

To try out the emulation, hit F12 and below the usual row of dev tools, you will see the second row like in this screenshot...

https://i.stack.imgur.com/nEYsF.gif

Plus, it also renders many of the popular device browsers out there...

Hope this helps.


This does not help, this doesnt emulate iPhone at all, it changes the resolution thats about it. This might be useful for Chrome on Android but for iPhone its useless...
The original questions asks for a "simulation", not an "emulation". Look up for the difference... An 'emulation' of the iPhone is next to impossible unless Apple itself releases something... what we have is 'simulations'...
well its quite a stretch to changing resolution an "iphone simulation"
c
codeulike

I'll start off the answers:

Blackbaud labs have an open-source, Abode Air powered iPhone browser sim here:

edit: new link: ibbdemo2
(go to downloads link to get .air binary. You need Adobe Air installed)

Unfortunately it doesn't reproduce my particular problem, so it must be rendering differently.


In my experience, the Electric Plum Electric Mobile Simulator (new branding for ibbdemo2) does not respond to media queries the same as a real iPhone. Specifically it does not correctly identify its max-device-width
M
Mike Ohlsen

Try these. I tried this in chrome, and sites i visited loaded the non-iphone version. Maybe safari would be better.

http://www.testiphone.com

http://iphonetester.com

UPDATE: After further research, looks like these really only limit the screen size, and dont use the iOS Safari rendering engine.


Thanks, well at least I know to eliminate them from my enquiries : )
Arggh! People have listed three emulators here, and none of them actually work! I am trying to build a responsive web site. It uses media queries to alter screen layout based on browser window size. When I look at my app in these "emulators", they look exactly the way I want them too. Great, celebrate. Except ... I tried using two iPhones to look at the exact same web page -- an iPhone 4 and a 5 -- and neither looks anything like the emulators. Both are responding to the media queries completely differently.
It's parking pages links.