我不确定,但我认为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;
}