Chrome-extension in production looks different than in development. WHY?

Question

Im creating an Angular2 Chrome-extension App.

It looks great when I created it in production.

However, this is how it looks when I upload it as a chrome-extension in development mode (Look at the logo and buttons).

The logo SHOULD be 75px (which it is in development), however in production it decides to be 87px even if the chrome tools tell me its 75px...

The same happens with the buttons.

Am I doing something wrong?

I did add the

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

tag.

It seems like chrome is taking over control of the viewport?

Answer 1

请检查chrome的缩放设置，并确保您的字体大小以px而不是em的形式显示，因为chrome扩展名在开发时不会复制em的大小。

Answer 2

Check out your 'zoom' setting in Chrome. (CTRL+MOUSESCROLL)