当来源是二维码或超链接时，网站移动版 Chrome 大小不正确

编程问答 2022-05-23

问题描述

这个问题似乎只出现在移动版 Chrome（iOS、Android 未测试）中，但在移动版 Safari 或移动版 Opera 中没有。

在移动设备上直接输入 URL 访问网站时，对象会正确缩放到屏幕大小：

Portrait 和 Landscape

当用户从 QR 码或超链接定向到移动版 chrome 上的链接时（iOS、Android 仍未测试），网站垂直缩放看起来有误：

Portrait - vertical scale is too long

在我看来，当来自 chrome mobile 上的 QR 码或超链接时，浏览器正在设置垂直比例，而没有考虑导航栏。

下面是我的 html 和 CSS。我很高兴添加一个 JavaScript 超时，如果需要，它会在加载后一两秒钟以某种方式重新缩放？

HTML 和 CSS

html,body {
  height:100%;
}

body {
    background-color: black;
    margin: 0;
    font-family: 'Lato',sans-serif;
    text-align: center;
    color: white;
}

#borderCtl {
    height: calc(100% - 60px);
    
    padding: 30px 50px;
}

.subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: solid white 1px;
  font-size: 3.2vw;
}

#rotationRequest {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
  font-size: 3.2vh;
}
 


 


@media screen and (orientation: portrait) {
    #rotationRequest {
        display: flex;
    }
    
    div.subtitle,div.borderCtl {
        display: none;
    }
    
    

}

@media screen and (orientation: landscape) {
    #rotationRequest {
        display: none;
    }
    div.subtitle {
        display: flex;      
    }

}
<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" href="css/style.css">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">  
    <!-- removed javascript files for stackoverflow purposes,should not effect anything -->
    
</head>

<body >
        <div id="rotationRequest">
            <div>Please rotate your device!</div>
            <img id="rotateImage" src="img/mobile-rotate.svg" width="80%">
        </div>
        
        <div id="borderCtl">
            <div class="subtitle">
                <div id="topLine">...</div>
            </div>
        </div>  
</body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmliosiosjavascriptmobile-chrome