3

I found a good article explains the concept of view port: https://www.quirksmode.org/mobile/viewports.html

But I'm still a little bit confused with the differences between window size and viewport size, Window Size:

enter image description here

Viewport Size:

enter image description here

aren't they the same thing?

  • 1
    Possible duplicate of [Viewport vs Window Vs Document](https://stackoverflow.com/questions/33770549/viewport-vs-window-vs-document) – Obsidian Age May 14 '18 at 01:27

2 Answers2

1

A viewport is the area that is visible to you on your device. A window is your browser window. The window can be as big as the viewport or smaller.

Kateryna S
  • 124
  • 5
  • so viewport is the same as screen size? and is viewport measured in css pixel or device pixel? –  May 14 '18 at 04:19
0

Another way to say what Kateryna S. mentioned is that the viewport renders differently depending on the size of your device. For example let's say you made a responsive web app using material design that through the grid system looks one way on your desktop browser and one way on your mobile device. The Mobile device has a much smaller viewport and will render the site using the smaller grid.

For example, if you look at material design and resize your browser you will see how it will look on different viewports. If you resize your browser to the smallest size that mimic basically what you would see on your mobile device.

https://material.io/design/components/cards.html#usage

The window is just your browser view and is not related to other devices.

Q-Master
  • 84
  • 5