responsive design - How to code CSS media queries targeting ALL mobile devices and tablets?

Question

@media only screen and (max-device-width : 640px) {
/* Styles */
}

@media only screen and (max-device-width: 768px) {
/* Styles */
}

This is what I have so far. The PSD mockup for the mobile site I'm working on, is 640px wide. The other one, the tablet version of the site, is 768px. I was able to test the site in my web browser by only using max-width, but now it's time to get this site working on the devices, and it's still rendering the regular full size web page. The two queries above are my best guess. Where am I going wrong?

Answer 1

This can be done with Level 4 Media Queries: (Browser Support is quite good - CaniUse)

Interaction Media Features

The idea here is to target devices based on their capabilities. (as apposed to say, checking the size or resolution of the device which tend to be moving targets)

The pointer media feature queries the quality of the pointer mechanism used by the device.

The hover media feature queries the user’s ability to hover over elements on the page with a given device.

So to answer the question...

Mobile devices/tables are similar in that:

1) The accuracy of the primary input mechanism of the device is limited.

This means we could use the following media query:

@media (pointer:coarse) {
    /* custom css for "touch targets" */
}

div {
  width: 400px;
  height: 200px;
  color: white;
  padding: 15px;
  font-size: 20px;
  font-family: Verdana;
  line-height: 1.3;
  background: green;
}
@media (pointer:coarse) { 
  div {
    background: red;
  }
}

<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#pointer">pointer media feature</a> queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>