Question

我有一个要使用的页面：

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

我的页面的结构如下：

<html>
  |
  |__<body>
        |
        |__<mainWrapper>  
                |
                |__<headContainer>
                        |   
                        |__<pageHeader>

html的样式为：

margin: 0;
padding: 0;
height: 100%;

body的样式为：

width: 100vw;

mainWrapper：

height: 100%;
width: 100vw;

headContainer：

background: #475679;
width: 100vw;

pageHeader：

position: relative;
max-width: 1275px;
height: 89px;
margin: 0 auto;

通过这种设置，当我以纵向模式在iPhone X上加载网站时，它可以正确显示（显示所有内容，整个标题都以初始缩放级别适合页面。

然后我将手机旋转90度时，页面调整完美，再次用标头覆盖了可用区域的整个宽度（不包括臭名昭著的缺口），并且缩放系数被完全缩小。

但是，当我再次将页面转到纵向模式时，标题现在在右侧被切掉了30-40px。我需要先张开以重置缩放，然后才能再次看到所有内容。

我一直在广泛尝试解决此问题，并且也进行了严格的研究。我找到了很多有关iOS类似问题的文章，但显然在iOS 6中已解决。我还尝试针对该问题应用三种不同的基于JavaScript的解决方案以及一种仅CSS的解决方案，但它们没有根本行不通-后来我也发现它们都是几年前出版的。

所以在这一点上，我没有选择权了。

也许有人遇到了这个问题，并且知道该怎么做，去哪里看或去哪里？

从风景到肖像时缩放值错误

0 个答案: