When using media queries you can set the min-width property and design accordingly but I'm testing using both my desktop and my mobile phone. My phone resolution is 1080p, the same as my desktop monitor however the design respond differently on both screens. It should behave the same shouldn't it? What am I missing? Why do they behave differently if I'm only using pixels?
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
回答1:
So it turns out a CSS pixel is different from a hardware pixel.
CSS specification says:
If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.
This is a good read: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
回答2:
Just got stung by this. The following line of code
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the <head> tags solved it perfectly for me.
![Prime Path[POJ3126] [SPFA/BFS]](https://oscimg.oschina.net/oscnet/e1200f32e838bf1d387d671dc8e6894c37d.jpg "Prime Path[POJ3126] [SPFA/BFS]")
