Ionic HTML components appear much wider (bigger) than expected

Ionic Framework ionic-v3
1

Hi, just something I have noticed, that has me a bit stumped…

When I run an Ionic application in the browser (ie in Chrome using ionic serve), elements display larger than the same markup in a straight html document.

For example, I have the following markup, in both a new blank Ionic app…

Ionic app

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content >
  <div style="display:grid;height:100%;grid-template-columns: 64px;grid-template-rows: 64px">
    <div style="height: 100%;background-color: red"></div>
  </div>  
</ion-content>

HTML file…

<!DOCTYPE html>
<html>
<head>    
        <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
 <div style="display:grid;height:100%;grid-template-columns: 64px;grid-template-rows: 64px">
      <div style="height: 100%;background-color: red"></div>
</div>  
</body>
</html>

So each has the exact mark up of

<div style="display:grid;height:100%;grid-template-columns: 64px;grid-template-rows: 64px">
      <div style="height: 100%;background-color: red"></div>

When I measure (eg in paint, or using a ruler app), the plain HTML display shows the square to be 16px, but the one displayed in the Ionic app is much larger (as can be seen below)

el

I am copying the UI an existing aging application into Ionic, so am looking at the sizes of elements in the old app, but then when the Ionic app is rendered, they appear much bigger

Anyone have any idea why this is?

Thanks in advance for any ideas.

2

hello,
browsers are not cad. Each brower can render the same page different.
Additionally your both pages are not the same. For example viewport is introduced by apple and is not offical standard and has influence how content will render, etc

Best regards, anna-liebt

3

Hi @anna_liebt, thanks for the reply, but in this case each is running in the same browser, i.e. Chrome, on the same machine, so they should render the same?

4

Oh no! I should not be a developer. The browser (that Ionic was running in), was zoomed! Put it back to default, everything is as expected…

5

Hello,
I can feel with you.

Against, what I said before. My index html has also viewport etc. inside.

But these both are not the same too. One is wrap inside ion-content other is wrap inside body. Then you must compare also all styles etc. that are connected, overwritten etc.

Best regards, anna-liebt.