I have a question about a website being responsive for different screen sizes. Is zooming in/out in the browser the same as opening my website on devices with different screen sizes?
Also, I notice that my web page looks perfectly fine on bigger screens but zooming it down makes my images go father away from each other and makes white space between images. Is that how it should be?
For CSS purposes they are the same thing.
You can easily verify that for yourself by running this one liner in your JS console: window.matchMedia('(min-width: <X>px)').matches.
Let's say that you have a FullHD monitor (1920 pixels wide) and you use Google Chrome. Also make sure that your zoom is 100%. Then you'll see that window.matchMedia('(min-width: 1920px)').matches returns true but window.matchMedia('(min-width: 1921px)').matches returns false.
Now, zoom out to 50% and repeat. You'll see that window.matchMedia('(min-width: 3840px)').matches returns true but window.matchMedia('(min-width: 3841px)').matches returns false. This proves that the CSS in the HTML page will think that the screen is 3840px wide.
As far as I know browser zoom and screen sizes on different devices behave differently.
Also I do not think that browser zoom can provide you with a reliable resolution value. On top of that, websites can decide to serve different sites or styles depending on the device which calls it. This can usually be identified using e.g. User Agent Strings amongst many methods.
If you like to test for mobile devices in your browser, consider Chrome Dev Tools. They have great options for testing mobile.
browser zoom is not the same as different screen sizes.
You can compare it to an image you want to print out. If you'd use a magnification glass the image appears to be bigger than it really is but the physical size is still the same.
If you would instead print it on a bigger piece of paper it would actually be bigger. For responsive design you I don't thing that the zoom is going to be of any help.
The dev tools are a better use for this as you can resize the website however you want.
Firefox for example also offers some settings emulating real screen sizes.
I would encourage you to use Firefox since the dev tools are just awesome.
Here are some screens showing how you can test your responsive design in Firefox.
custom resolution
emulating iPad Mini 2 screen
If you would like to create responsive designs I would also encourage you to have a look at CSS Grid since it makes building repsonsive websites really easy.
Link to Firefox Dev Tools: [LINK]
No its not same.
Zooming as implemented in modern browsers consists of nothing more than “stretching up” pixels. That is, the width of the element is not changed from 128 to 256 pixels; instead the actual pixels are doubled in size. Formally, the element still has a width of 128 CSS pixels, even though it happens to take the space of 256 device pixels.
In other words, zooming to 200% makes one CSS pixel grow to four times the size of one device pixels. (Two times the width, two times the height, yields four times in total).
Learn more about what happens when you zoom: https://stackoverflow.com/a/40149173/7257502
