CSS Pixel 和 Device pixels

Web developers need CSS pixels, that is, the pixels that are used in CSS declarations such as " 1 width:300px; 2 font-size:14px; ".

These pixels have nothing to do with the actual pixel density of the device. They are essentially an abstract construct created specifically for us web developers.

It's easiest to explain when we consider zooming. If the user zooms in, an element with " width:300px; " takes up more and more of the screen, and thus use more and mroe device pixels(physical). In CSS pixels, however, the width remains 300px.

In <meta name="viewport" width="device-width"> , width querys the total width of the page in CSS pixels, the device-width querys the width of the device in device pixels.