CSS Unused CSS Stages Media Queries Device-Specific Media Queries: Part 1

Edward Bryan Kene Morales
Edward Bryan Kene Morales
7,374 Points

iOS Simulator for Windows

Hi guys,

I hope someone can help me out. Is there an iPhone Simulator for Windows like the one Guil uses in the video? It would be an awesome addition to my tools.

Will really appreciate any help. Thanks in advance!

2 Answers

Are you looking for a mobile-safari screenshot generator, or an emulator?

You might want to try; http://www.browserstack.com/mobile-browser-emulator

or use Chrome's mobile emulation; https://developer.chrome.com/devtools/docs/device-mode

I dont have any experience with this web-based emulator, but there is this as well; http://transmog.net/iphone-simulator/

Edward Bryan Kene Morales
Edward Bryan Kene Morales
7,374 Points

Hi Imuya!

Thanks much! I didn't know Chrome has that. I am only using Firefox when coding and just use Chrome when testing. Um, I will check the other links but it seems they are web-based, except for the one you mentioned in Chrome.

In the video, it seems that Guil uses an installed application where he can launch Safari and run the code there.

I believe you can download Safari 5.1.7 from here for Windows;

http://support.apple.com/kb/dl1531

From what I remember of the videos, I think Guil was using an actual mac. I'm not sure if the windows version of Safari differs from the macintosh version in terms of rendering.

Also its important to remember that many people dont use up-to-date versions of browsers, and that mobile browser versions can render slightly different than their desktop versions, and the current mac-only version of Safari is 5.1.10

Edward Bryan Kene Morales
Edward Bryan Kene Morales
7,374 Points

Sorry for not clarifying this but yes, I do already have Safari for Windows. The point why I want to get my hands on the iOS simulator kind of thing is when testing this code for example:

@media screen and (max-device-width: 480px) {
  /* Code for the breakpoint here */
}

which only targets devices with an actual max-viewport width of 480px for example. This cannot be tested in a browser run on a desktop or laptop because the browser detects the max-viewport width of the laptop/desktop to be more than 480px. I hope that makes sense.

I looked into it more closely and I guess it is the one that iOS developers uses and sadly it is not available for Windows.

Edit:

I found it, it is with XCode and it doesn't support Windows (As expected). Thanks for the help though!

You can test this by changing max-device-width media query to max-width instead. This will load your css when you resize the browser window. Its not a perfect solution, but it should be decent enough for your first rounds of testing.

http://codepen.io/anon/pen/jErpaM

Here is an example codepen using a max-width: 800px media query.

Greetings, all! I may be late to the dance but I would like to suggest the website http://crossbrowsertesting.com/ This site is super and really gives an extensive UI/UX testing; it has a 7 day trial period. The person who owns it is really supportive and always responds to feedback. Plus if you get a CodePen pro account (very nominal, even for the unemployed) you can use the option to see your code at crossbrowser.