1

The situation:

Working on an adaptive website for my job. I've got the media queries and CSS adjusted properly for my 2012 non-retina macbook pro and for iphone retina screens. But, I was at Best Buy trying the new site on a macbook pro with retina, and it was grabbing the css for the iphone retina screen. The media query I'm using to target the iphone:

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait) {}

Any solutions I've been finding for testing high res sites on low res screens, involve just doubling the resolution, and aren't accounting for the media queries.

1) Am I using the proper media query for what I'm trying to do? 2) (more importantly) Is there a way for me to see what my site looks like on hi res laptops

(I'm not going beyond iphone screens right now as I don't have different devices to test on, and for confidentiality agreements, I can't post the site up. Let me know if there is other critical code segments that would be needed to get a solid answer)

Thanks!

ahainen
  • 766
  • 1
  • 5
  • 12
  • 1
    Maybe browserstack.com can help in this situation. So you can test better (it's not free, i don't work there, it's just awesome tool). Also maybe the non-retina had screen setting that took your iphone query instead of the high res query – JochemQuery Jan 28 '14 at 10:08
  • Hey, thanks - didn't know about browserstack, thats super useful. I ended up making my media query more specific to do resolution AND width. Furthermore, I kinda asked a question and solved it in a way that wasn't in the answers here - for StackOverflow, not sure what the policy is for marking the right answer? (I just dont wanna be a dick, all the info was super useful) – ahainen Jan 28 '14 at 15:59

2 Answers2

2

The media queries look ok. To test:

  • In Firefox: Go to Tools -> Web Developer -> Responsive Design. It will put a wrapper around your webpage and you can select the resolution, up to 1920px wide.
  • In Chrome: Go to Tools -> Developer console. Open the developer settings (the gear icon in the lower right corner). Click on the "Overrides" section. Check the "Device Metrics" box and set the screen size to the one you would like to test for.
  • In IE9+, go to the F12 developer tools and go to the "Tools" menu. You can set device resolution there.

Changing these settings will re-render the page and trigger your media queries if they are correct.

Matt
  • 1,287
  • 2
  • 11
  • 25
  • Hey, thanks for the help! The developer tools in Chrome weren't showing "Device Metrics" section, as far as I could see. (Mac or PC) Also, I realized my media query was only targeting resolution, so I just did resolution AND screen width. I was specifically doing a thing where if the screen was so narrow, then hide certain divs; so when I went to the MacBook Pro, it was hiding things that I only wanted hidden on the iPhone retina screens. Width was the solution. Thank you for the resources though, the Firefox and IE tools are definitely things I didn't know about. – ahainen Jan 28 '14 at 15:57
  • 1
    @ahainen I am glad that things worked out for you, to bad that the tools weren't what you needed. You should post your solution as an answer and accept it so that anybody else who has the same issue can find it easily! – Matt Jan 28 '14 at 16:04
2

You can simply use those addon for chrome: https://chrome.google.com/webstore/detail/dimensions/hdmihohhdcbejdkidbfijmfehjbnmifk or https://chrome.google.com/webstore/detail/troy/hflapaedaljpdhhdcdgkmhgmcncdchca