How are websites automatically zoomed out when browsed by mobile phones?

Question

In my case I made the div width 500px,

but it automatically zoomed out when browsed in a mobilephone

How's the magic done exactly,is it device specific?

Answer 1

The browser do whatever it wants to. Since mobile phones have a small screen probably this browser zoomed out to be more pleasant to look the page.

Answer 2

It is browser specific.

It's even a configurable option in most mobile browsers (eg Android, Nokia S60, Opera Mini). I prefer to have it turned off, so that pages open with normal 100% zoom (and if it's cut off, I just scroll).

Some people prefer to see the whole page width at once even if the text is too small to read, then double-tap to zoom up after that.

The browser typically calculates the total width of the page first. In this calculation any flexible-width element is taken to be the minimum width which can fit all its children. If this is less or equal to the width of the browser window no scaling is done, but if it's greater, the browser sets this as the virtual page width and, if the user has turned this option on, scales everything down (like zooming out in a modern desktop browser) so that that minimum width of the page occupies the width of the browser window.