时间戳

首页 > 解决方案 > 手机浏览器绝对底层

html - 手机浏览器绝对底层

问题描述

我在使用移动浏览器底部的特定偏移量正确定位文本时遇到问题。这里的CSS定位它。这显然可以在任何桌面浏览器上正确显示（包括低分辨率和更正的像素比），但在每个移动浏览器上都显示不正确。看起来移动屏幕测量考虑了潜在的菜单大小，但我不确定。如何解决？

position: absolute;
bottom: 0;
transform: translateY(-30px);

在此处输入图像描述

一个活生生的例子要复杂得多，但这是对问题的简单演示。在桌面上，文本完全适合黑线。在手机上，它向上移动了 3-4 px

* {
    box-sizing: border-box;
  }
  html {
    font-family: sans-serif;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
  }  
h2 {
    position: absolute;
    bottom: 10px;
    text-align: center;
    color: white;
    width: 100%;
    left: 0;
    font-size: 50px;
    clear: both;
  }
  section {
    border-bottom: 1px solid white;
    padding: 1rem;
    height: 100vh;
    scroll-snap-align: start;
    text-align: center;
    position: relative;
    background: #EAB003 url('https://i.ibb.co/RTHZnxB/bgbg.png') no-repeat fixed bottom
  }
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<section>
    <h2>Hello Kittie 1</h2>
</section>
</body></html>

标签： htmlcssmobilecss-position

解决方案

推荐阅读