While learning about the Media Queries, I was having confusion between the properties height/width and the properties prefixed with device. So I feel it is really important to mention the difference before going ahead and diving deep into Media Queries. The non-prefixed properties specify the height/ width of the browser window you are currently viewing(Viewport), while the properties prefixed with device- defines the width of the device screen which can be a monitor. Another important feature I shall mention here is the Viewport meta tag which is used to avoid displaying a website in mobile browser in desktop version. The meta tag can be written in the following format.
<meta content=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1 />
The tag asks the device to treat the width of the viewport to be equal to the device width, which means it the rendering area and viewport will be same. So you can continue using the normal width property without having confusion with the prefix. The tag also restricts the device from scaling the content.
Apart from width/ height properties we have one more important feature- Orientation. There can be two types of orientation values-Landscape and Portrait. It is not yet supported by many devices. Check the modified demo here