I am currently working on a basic web application, but I'm facing an issue that's proving to be quite puzzling. When viewed on Desktop Chrome with the display set to iPhone 12 Pro (although I have a 13 Pro), everything looks perfectly aligned in the window:
https://i.sstatic.net/1O9SM.png
However, once the site is deployed onto IIS and accessed from my phone, I see something like this (screenshot taken from my iPhone):
https://i.sstatic.net/tV7fy.jpg
The buttons are contained inside a div element, and here is the CSS code for reference:
.buttons {
display: flex;
flex-flow: row;
flex-wrap: wrap;
width: 60vw;
margin: auto;
}
Furthermore, the specific styling applied to the buttons is as follows:
.number {
width: 15vw;
height: 15vw;
margin: 2.5vw;
font-size: 7.5vw;
/*border-radius: 20vw;*/
}
This snippet of HTML content illustrates the layout structure:
<div class="content">
<div class="total">
Sum Total: {{ sumTotal | currency :'GBP':'symbol':'1.2-2' }}
</div>
<div class="list">
<span class="amount" *ngFor="let values of listOfValues">
{{ values.amount | currency :'GBP':'symbol':'1.2-2' }} | <i class="bi bi-trash float-right" (click)="remove(values)"></i>
</span>
</div>
<div class="value">
<div class="symbol">£</div>
<div class="box">{{ digit5 }}</div>
<div class="box">{{ digit4 }}</div>
<div class="box">{{ digit3 }}</div>
<i class="bi bi-dot"></i>
<div class="box">{{ digit2 }}</div>
<div class="box">{{ digit1 }}</div>
</div>
<div class="buttons">
<button class="number" (click)="add('7')">7</button>
<button class="number" (click)="add('8')">8</button>
<button class="number" (click)="add('9')">9</button>
<!-- Break -->
<button class="number" (click)="add('4')">4</button>
<button class="number" (click)="add('5')">5</button>
<button class="number" (click)="add('6')">6</button>
<!-- Break -->
<button class="number" (click)="add('1')">1</button>
<button class="number" (click)="add('2')">2</button>
<button class="number" (click)="add('3')">3</button>
<!-- Break -->
<button class="number" disabled><i class="bi bi-backspace"></i></button>
<button class="number" (click)="add('0')">0</button>
<button class="number" (click)="addAmount()"><i class="bi bi-plus-lg"></i></button>
<!-- Break -->
</div>
</div>
If you'd like to view a working demo, check out the following link on StackBlitz, where the buttons appear correctly ordered.
Is there something crucial I may have overlooked in terms of mobile CSS styling? It's perplexing why the mobile view doesn't match the desktop appearance, given that I've calculated each button's width to adjust the total div width accordingly with automatic margins on either side.