What is the browser auto-zoom based on and how can I offset using CSS or Javascript?

Question

I've built a web page which displays a grid. On the regular screen (laptop / desktop), the browser is at 100% zoom level and the UI looks fine.

However, when I connect my laptop to a projector, the browser automatically sets the zoom % to 125% and everything is bigger and scroll bars appear everywhere.

I don't understand what this behavior is based off or where it is coming from. Is it due to the resolution change?

Is there a way for me to make sure my UI does not get zoomed when I connect to a large screen?

Thanks

Answer 1

通过设置viewport元标记，您应该能够避免在某些屏幕上缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />