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

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -