Can I use OS X Safari browser to properly test iOS Safari browser-specific code using media queries?

Question

I do not own any iOS devices, thus all my web coding development is done on Safari. I've been trying this awesome project to do my testing, but I'm finding out that it's possibly limited.

Specifically, I want to use specific media queries within my main CSS so that only the iPad can render the CSS:

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

When I try access it via localhost on OS X Safari using the Responsive Testing project using Safari on OS X, it ignores the code. I even tried more specific code for landscape and portrait with no success:

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

This wasn't successful either.

Since I don't own the iPad/iPhone, I can only see the result at the Apple Store. Is the code I provided literally only accessible on the iPad and I can't use Safari on my computer to do some initial testing?

Answer 1

For those who don't own an iOS device like an iPhone, iPad, or iPod Touch, the cheapest/free way to develop without the hardware is to download XCode and run the iOS Simulator. You can quickly switch between the devices in the simulator and they load as they would on the devices themselves.

Rock on and thank you to @icktoofay!