Element-plus的Container布局容器在苹果手机中丢失el-header的解决办法

后台界面可以利用《Container 布局容器》的原生元素快速布局。但是但是，在苹果手机上其<el-header></el-header>元素会被<el-main></el-main>顶没了，反正就是看不见了，在电脑上怎么测试都没用，手机上在微信里打开正常，一用浏览器打开，无论是safari还是Chrome都会丢失~~

到底怎么回事呢?

• 每个人出问题的原因都不同，我的出错原因不一定是你的哦。

• 我先是根据以下入手去调试，统统失败
  《iOS上display:flex的兼容性问题》
  《flex-shrink》
  《safari到底支不支持flex（弹性布局）？》
  《ios flex失效 苹果flex怎么用》
  《CSS 为什么我的iPhone上的”display: flex”和”align-items: center”不再起作用了》

• 想到只有手机模式下才会丢失，那是不是从验证手机模式的代码分支中去寻找呢？
  找了一圈还是没发现解决方案，哪怕直接复制element-plus的官方案例，在什么其它代码都没有的情况下也失败。

• 最终找到了index.html，这家伙脑袋上有一句是和手机相关：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

• 终于解决了：
  三个字：删删删！
  • width、initial-scale和user-scalable可以保留用来满足手机需求；
  • user-scalable=no建议保留，防止手机的放大缩小破坏布局；
  • 这几项的排列顺序有不同可能也会出错；
  • 不要再增加额外的项目，比如minimum-scale=1.0'、'maximum-scale=1.0都可能引起问题。

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