为什么initial-scale = 1.0会使元素保持对齐？

Question

我有一个HTML页面，我希望某些元素居中。我需要它与移动设备配合使用，所以我添加了

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

但是我看到（使用Chrome移动模拟器和真实的iPhone 7）所有元素保持对齐。

如果我将初始比例更改为0.5，则元素居中，但Google表示文字太小。

我以这种方式将元素居中

<div style="text-align: center;">
    <h1>
        <div style="display: inline-block; text-align: center;">Example<div>
    </h1>
</div>

如何将初始比例设置为1并将元素居中？