Recientemente he estado trabajando haciendo el diseño actual de Quizzpot Responsive Design. Hacer diseño responsivo es bastante sencillo, solo se trata de modificar algunos estilos dependiendo el tamaño del viewport para ocultar/mostrar, cambiar el tamaño de algún elemento o realizar cualquier otra cosa que necesites.

Cuando hacemos Responsive Design es de suma importancia utilizar los Media Querys para apuntar a los diferentes tamaños de dispositivos. A continuación listaré los querys para las diferentes versiones de iPhone y iPad.

iPhone 5 Media Queries

iPhone 5, portrait & landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
    /* STYLES GO HERE */
}

iPhone 5 landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
    /* STYLES GO HERE */
}

iPhone 5 portrait

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
    /* STYLES GO HERE */ 
}

iPhone 2G, 3G, 4, 4S Media Queries

iPhone 2G-4S portrait & landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    /* STYLES GO HERE */
}

iPhone 2G-4S landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) {
     /* STYLES GO HERE */
}

iPhone 2G-4S portrait

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { 
    /* STYLES GO HERE */ 
}

iPad Media Queries (Todas las generaciones, inclusive el iPad mini)

iPad in portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
    /* STYLES GO HERE */
}

iPad in landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    /* STYLES GO HERE */
}

iPad in portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    /* STYLES GO HERE */ 
}