safari responsive design mode vs. reality

ENVIRONMENT

• MacBook Air (13.3")
  • Sierra v10.12.6
  • OS X Server App v5.3.1
  • Safari (10.1.2)
• iPhone 6s

  iOS 10.3.3

• iPad Air (9.7")

  iOS 10.3.3

SYNOPSIS

I'm attempting to verify a bunch of HTML5/CSS3 code for a website through the Responsive Design Mode in Safari.

Initially I was doing this solely on my laptop, but today I downloaded the Server App and set things up so that I could connect to my local-server site from both my iPhone and iPad to truly verify what the site looked like there.

To put it mildly, I'm a bit confused and slightly ****** off.

BACKGROUND

My CSS file has numerous media query/conditionals to try to achieve the best look for each orientation of each device (I figured I'd be able to verify non-Apple product renderings once the changes actually go live - since I don't have any such devices myself :-)), for example:

@media only screen and (max-width: 400px) and (max-height: 600px) @media only screen and (max-width: 400px) and (min-height: 601px) and (max-height: 800px) @media only screen and (max-width: 400px) and (min-height: 801px) and (max-height: 1200px) @media only screen and (max-width: 400px) and (min-height: 1201px) @media only screen and (min-width: 401px) and (max-width: 600px) and (max-height: 400px) @media only screen and (min-width: 401px) and (max-width: 600px) and (min-height: 401px) and (max-height: 800px) @media only screen and (min-width: 401px) and (max-width: 600px) and (min-height: 801px) @media only screen and (min-width: 601px) and (max-width: 800px) and (max-height: 400px) @media only screen and (min-width: 601px) and (max-width: 800px) and (min-height: 401px) and (max-height: 600px) @media only screen and (min-width: 601px) and (max-width: 800px) and (min-height: 601px) and (max-height: 800px) @media only screen and (min-width: 601px) and (max-width: 800px) and (min-height: 801px) and (max-height: 1200px) @media only screen and (min-width: 601px) and (max-width: 800px) and (min-height: 1201px) @media only screen and (min-width: 801px) and (max-width: 1000px) and (max-height: 1200px) @media only screen and (min-width: 1001px) and (max-width: 1200px) and (max-height: 800px) @media only screen and (min-width: 1001px) and (max-width: 1200px) and (min-height: 1201px) and (max-height: 1800px) @media only screen and (min-width: 1001px) and (max-width: 1200px) and (min-height: 1801px) @media only screen and (min-width: 1201px) and (max-width: 1800px) and (max-height: 800px) @media only screen and (min-width: 1201px) and (max-width: 1800px) and (min-height: 801px) and (max-height: 1200px)

Yes, it may be overkill, but I figured I'd try a fine level of granularity to begin with and then see if I could simplify later.

ISSUE

I based my media conditionals on the dimensions indicated in the Safari Response Design Mode. There, it lists the iPhone 6s as being 667x375 (landscape). I was kind of confused when the CSS directives I placed within what I thought was the correct directive (@media only screen and (max-width: 400px) and (min-height: 601px) and (max-height: 800px) & @media only screen and (min-width: 601px) and (max-width: 800px) and (max-height: 400px)) didn't seem to have any effect when rendering the site on my actual iPhone 6s. I played around with things and found that none of my conditionals seemed to capture it.

I then did some searching online and found this, which clearly indicates that the device is 1334x750 (landscape) - i.e.: twice the size as far as pixel resolution is concerned (I assume this has to do with the retina display).

My point is:

If the rendering of the iPhone 6s is so far off in the Response Design Mode interface - how far off are all the other simulators - and why would Apple - the provider of both the hardware and software in this case (whether OEM or otherwise) provide such a useless interface for people trying to develop websites to work gracefully on their devices?

QUESTIONS

• Is Apple planning to fix this gross deception anytime soon?
• Is there any way to get a more accurate simulator for the various models - without having to spend a bunch more $$'s (I'm doing this work out of love and interest, I'm not getting paid for it)