Technically, you have to ask Apple that question. The browser provides the safe area insets and Main UI just respects that.
You can check other websites, like our community forum (powered by Discourse) or the Eclipse LMOS website (Eclipse LMOS | Eclipse LMOS) and you will notice the same behaviour.
In fact I can understand why Apple chose to have the safe areas symmetric, assymetric just looks really weird.
We will not start messing around with those safe areas, those are set by the browser or even somewhere higher in the hierarchy. It is not possible to handle the safe areas manually for each and every single device, hence this concept was introduced to browsers to be consumed by websites and webapps.
See env() - CSS: Cascading Style Sheets | MDN.
iPad very likely sets no safe areas at all, but there is some spacing towards the edge of the screen.
You can override the defaults for the spacing between the widgets.
If you use custom widgets based on f7-card, just set the margin-left and margin-right style props, or if you use standard widgets, add style config to your page through the code tab and set the --f7-card-margin-horizontal
CSS variable.