Device Hands-On 1

Back

Device Simulation Tool Practice

The Device Simulation tool allows you to test how your website looks and behaves on different devices and screen sizes.

How to Access the Device Simulation Tool

  1. Open Chrome DevTools by pressing F12 or Ctrl+Shift+I (or Cmd+Option+I on Mac)
  2. Click on the Device Toggle icon in the toolbar (looks like a mobile phone) or press Ctrl+Shift+M (Cmd+Shift+M on Mac)

Exercises

  1. Use the Device Simulation tool to view this page as if on an iPhone 12
  2. Change the orientation from portrait to landscape
  3. Try different device presets and observe how the layout changes
  4. Test the responsive elements below and observe how they adapt
  5. Check the network throttling options to simulate slower connections

Responsive Demo Elements

Responsive Box

This box changes color and layout based on screen width:

Responsive Images

These images will stack vertically on mobile and display horizontally on larger screens:

Demo Image 1 Demo Image 2 Demo Image 3

Hidden on Mobile

This content will disappear on mobile devices (width < 768px).

Mobile-Only Content

This content only appears on mobile devices (width < 768px).

Device Information

Current viewport dimensions: 1280px × 720px

Device pixel ratio: 1

User agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)

Pro Tips