0

I'm relatively new to CSS and I've been researching and researching this, but I'm still very unsure and thoroughly confused about how to properly make a responsive CSS for a site that works on mobile devices with retina screens.

When I use max-width, it doesn't load properly on a retina device such as a iPhone or iPad. It doesn't work because the pixel width of those devices is actually double, right? I've tried using the and (resolution: x) thing, but that didn't really work either, the retina devices just kept loading the standard CSS.

Then I tried max-device-width. Which works great on retina devices, but now I'm reading that that is discouraged because it makes for a non-fluid site on the desktop.

So what is the proper way to target width on a retina device? Do I duplicate that part of the CSS and have a max-width section for non retina devices/desktop AND a max-device-width section of the css for only retina devices? That doesn't seem right to me, but that's the only solution I can think of.

I'm trying to customize an OJS page ( https://pkp.sfu.ca/ojs/ ) So I can only use a single CSS file, even editing the html can be problematic. So for example, I'm trying to enlarge the navbar when viewed on an iPhone with retina so I do this:

@media (max-device-width: 768px) {

        #navbar {
            height: 50px;
        }

If I use max-width, it does not increase the height of the navbar on the phone.

mbauer
  • 11
  • 1
  • Post some of the code you're trying to use. Are you using a meta viewport tag in your HTML? Retina and non-retina devices should essentially be treated the same by media queries. – Steve Sanders Oct 23 '14 at 14:41
  • Just to clear up some misconceptions. Yes, the pixels are "doubled" but it's not in the way you think. The PPI of the screen is increased, but the layout space is fundamentally the same. The OS displays at a reasonable resolution (1400x900 instead of 2800x1800 for instance) but pixel density is increased. -- Therefore, you shouldn't need any separate `media` queries for retina devices. – Josh Burgess Oct 23 '14 at 14:43
  • I'm trying to customize an Open Journal System ( pkp.sfu.ca/ojs ) page, so I can't use anything like bootstrap. Basically, all I can use is CSS. Editing the html is even problematic. So for example, this is my code to make the navbar bigger on an iphone: `code` @media (max-device-width: 767px) { #navbar { height: 50px; }`code` If I use just standard max-width, it doesn't work at all. Why? – mbauer Oct 23 '14 at 16:58

0 Answers0