It's an incantation to make the page look slightly less stupid on a phone.

https://www.w3schools.com/css/css_rwd_viewport.asp for an example image

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... for more detailed info

So the html looks as god intended on mobile devices. It became necessary, because web pages squeezed to mobile sizes were looking terrible with all those sidebars bent and excessive padding and margins. So Apple (I believe it was them) made this workaround, by default your phone renders pages scaled, like it's a window to your desktop computer's maximized browser. Then it looked good. But what about pages that are responsive or just look good no matter the window size? That's the line that needs to be there.

if you remove all css it looks good again on mobile devices

Thanks! I didn't know about this, but it does make sense. Is there a way to limit the max-width of text without CSS?

It sets mobile browsers use actual widths and not emulate desktop width.

it is not exactly the actual width of the device, but the default viewport width, given in CSS pixels. E.g. for the iphone 6 it is 375 pixel, although the physical width is 750 pixel...

Yeah, but the same is true for desktops/laptops that use scaling. I think that people are used to the fact that 1 render pixel does not always equal 1 physical pixel.