• 8 heures
  • Facile

Ce cours est visible gratuitement en ligne.



J'ai tout compris !

Mis à jour le 17/12/2018

Preview using different devices

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Being a web developer these days means creating content for many devices, including smartphones and tablets. If you've studied any HTML or CSS, you've certainly heard buzzwords like responsive, mobile-first, and other ways of indicating that multiple screen sizes are taken into account for content.

Developer tools offer a great, relatable jumping-in point that allows you to see a website as it would appear on different devices!

Device Mode

In the developer tools, you can see two buttons in the top left of the upper bar. One selects an item from a page (same as right click/inspect element) and the other is called Toggle device mode.

Click the little smartphone and tablet!
Click the little smartphone and tablet!

You'll have the choice between many possible devices on which you can simulate what a web page would look like. I personally have an iPhone 6, so let's look at our test HTML page from the previous chapter on an iPhone 6 (in theory)!

This looks pretty similar to the way the test page looked on a regular desktop view, but for many websites, this will look completely different. 

New York Times simulated on an iPhone 6
New York Times simulated on an iPhone 6

If you don't like the dropdown list presented at the top of the preview, you can even check off additional devices from the menu by clicking Edit within the dropdown list.

Phones on phones on phones
Possible devices
Exemple de certificat de réussite
Exemple de certificat de réussite