css - Responsive design on retina devices -
css - Responsive design on retina devices -
i'm relatively new css , i've been researching , researching this, i'm still unsure , thoroughly confused how create responsive css site works on mobile devices retina screens.
when utilize max-width, doesn't load on retina device such iphone or ipad. doesn't work because pixel width of devices double, right? i've tried using and (resolution: x) thing, didn't work either, retina devices kept loading standard css.
then tried max-device-width. works great on retina devices, i'm reading that discouraged because makes non-fluid site on desktop.
so proper way target width on retina device? duplicate part of css , have max-width section non retina devices/desktop , max-device-width section of css retina devices? doesn't seem right me, that's solution can think of.
i'm trying customize ojs page ( https://pkp.sfu.ca/ojs/ ) can utilize single css file, editing html can problematic. example, i'm trying enlarge navbar when viewed on iphone retina this:
@media (max-device-width: 768px) { #navbar { height: 50px; }
if utilize max-width, not increment height of navbar on phone.
css iphone ipad responsive-design retina
Comments
Post a Comment