Voici un outil en ligne très pratique pour tester un site web Responsive Design.

L’outil en question est disponible à cette adresse : http://www.isresponsive.com/.

Pour l’utiliser c’est très simple, il vous suffit de saisir l’url de votre site web à tester et de cliquer sur “check” pour que le rendu soit fait sur différentes tailles d’écran de smartphones et de tablettes. Chaque rendu est exécuter dans une “iframe” ce qui vous permet de naviguer sur votre site et de voir directement le rendu de toutes vos pages.

Pour chaque rendu, la Media Query associée est disponible pour l’utilisée directement dans votre code CSS.

Portrait 320 x 480

Media Query

@media screen and (max-width: 320px), (min-device-width: 320px) and
(max-device-width: 480px) and (orientation : portrait) {
/* CSS */
}

Paysage 320 x 480

Media Query

@media screen and (min-width: 320px) and (max-width: 480px), (min-device-width: 320px) and
(max-device-width: 480px) and (orientation : landscape) {
/* CSS */
}

Portrait 360 x 640

Media Query

@media screen and (max-width: 360px), (min-device-width: 360px) and
(max-device-width: 640px) and (orientation : portrait) {
/* CSS */
}

Portrait 600 x 960

Media Query

@media screen and (max-width: 600px), (min-device-width: 600px) and
(max-device-width: 960px) and (orientation : portrait) {
/* CSS */
}

Paysage 1024 x 768

Media Query

@media screen and (min-width: 768px) and (max-width: 1024px), (min-device-width: 768px) and
(max-device-width: 1024px) and (orientation : landscape) {
/* CSS */
}