Android上的Chrome 55.0.2883.91是否可以正确缩放固定元素?

时间:2017-01-25 03:47:08

标签: android html css google-chrome css-position

我不确定,但我认为Chrome for Andoird开始放大固定元素,而这些元素在缩放时不再打破页面/布局。

请在运行最新Android版Chrome(在移动设备上)的本地开发环境中查看此简单JSFiddle

当我缩放具有此元标记的页面时

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

顶部有两个固定元素,缩放就像这样。

固定元素绝对定位,可以放大,而不会使固定元素保持原位并破坏页面/布局。

无论用户是否覆盖了辅助功能设置中的缩放设置,都会发生这种情况,即使默认缩放开始与我认为的固定元素一起使用也很好。

是否有适用于Android版Chrome的更新日志以获取最新更新?我找不到它,并希望验证这个假设是否正确。

HTML

<div class="fixed-placeholder">
  <div class="site-header">
        Site Header
  </div>
  <div class="menu-icon">
        Menu
  </div>
</div>
<div class="content">
    Content
</div>
<div class="content">
    Content
</div>
<div class="content">
    Content
</div>
<div class="content">
    Content
</div>

CSS

.fixed-placeholder {
    height: 6em;
    display: block;
}
.site-header {
    position: fixed;
    height: 3em; /* same as fixed-placeholder to avoid page jump or content moving under the fixed element */
    top: 0;
    left: 0;
    width: 60%;
    background-color: #ccc;
    font-size: 2rem;
    /*width: 80vw;*/
    /*display: none;*/
}
.menu-icon {
    position: fixed;
    height: 3em;
    top: 0;
    right: 0;
    border: 1px solid black;
    width: 40%;
    font-size: 2rem;
    /*width: 20vw;*/
}
.content {
    height: 500px;
    border: 1px solid green;
}

0 个答案:

没有答案