cssgoogle-chromemedia-queriesweb-inspectorhandheld

Can chrome's inspect tool device manager pick up media query handheld?

I added a media query handheld to some of my code but cannot find a way to to test it. 

@media handheld{

  #small_display{
      display:block;
  }
  #map1{
      display:none;
  }
  #map2{
      display:none;
  }
}

I have the site running on my localhost but when I inspect with google and select a device I see no update.

Solution

  • Steps:

    1. Open devtools
    2. Click "Toggle device mode" icon
    3. Click "Emulate" tab at the bottom of dev tools
    4. Select "Media" in "Emulate" tab
    5. Select checkbox "CSS media"
    6. Select in dropdown list of "CSS media" handheld

    Screenshots:

    "Toggle device mode" icon

    enter image description here

    "Emulate" tab at the bottom of dev tools

    enter image description here