Question

在移动设备（Android，Chrome，全高清屏幕，肖像）上浏览以下代码时，lorem ipsum-text及其标题（“Home”）似乎在滚动时会略微“跳过”。更准确地说，似乎文章元素被拉伸到右下方，大约10px。

我已经阅读过有关此问题的内容，并且似乎存在一个修复程序，您可以通过Javascript以某种方式禁用硬件加速滚动（这似乎会导致此问题）。

问题：我可能只在这个项目中使用HTML5和CSS3。

这只能用这两种语言修复吗？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

    <link href="http://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="stylesheet.css">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="author" content="John Smith">
    <meta name="description" content="A website.">
    <meta name="robots" content="noindex">

</head>

<body>
    <header>
        <h1>Header H1</h1>
        <h2>Header H2</h2>
    </header>
    <nav>
        <ul>
            <li><a href="/dir" class="nav-item" id="current-page">Home</a></li>
            <li><a href="/dir/page1" class="nav-item">Page 1</a></li>
            <li><a href="/dir/page2" class="nav-item">Page 2</a></li>
            <li><a href="/dir/page3" class="nav-item">Page 3</a></li>
        </ul>
    </nav>
    <article>
        <h3>Home</h3>
        <section>   
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum pulvinar ante, ac feugiat augue gravida eget. </p>
            <p>Vestibulum a odio iaculis, sagittis arcu vitae, elementum orci. Quisque et pretium mauris. Vivamus auctor ultricies lacus at efficitur.</p>
            <p>Nullam fermentum dui et ligula placerat faucibus. Curabitur ut libero nec erat finibus ornare. Suspendisse convallis imperdiet consequat. </p>
            <p>Vestibulum a odio iaculis, sagittis arcu vitae, elementum orci. Quisque et pretium mauris. Vivamus auctor ultricies lacus at efficitur.</p>
            <p>Nullam fermentum dui et ligula placerat faucibus. Curabitur ut libero nec erat finibus ornare. Suspendisse convallis imperdiet consequat. </p>
            <p>Vestibulum a odio iaculis, sagittis arcu vitae, elementum orci. Quisque et pretium mauris. Vivamus auctor ultricies lacus at efficitur.</p>
            <p>Nullam fermentum dui et ligula placerat faucibus. Curabitur ut libero nec erat finibus ornare. Suspendisse convallis imperdiet consequat. </p>
        </section>
    </article>
    <footer>
        &copy; John Smith 2015 <br>
        <small><em>Some small-emmed text.</em></small> <br>
    </footer>
</body>

</html>

CSS：

html {
background-color:#fbffff;
padding-top:2vh;
padding-bottom:2vh;
}

body {
font-family:Merriweather, sans-serif;
overflow:auto;
text-align:center;
background-color:#E3DEC1;
margin:0 auto;
padding:.1vh 0 0;
}

header {
line-height:50%;
}

#current-page {
color:#451b16;
}

header h1,header h2 {
color:#B94629;
}

a,a:visited {
color:#47AFAF;
}

nav > ul > li > a:visited,.nav-item {
color:#FFF;
}

nav {
background-color:#B94629;
overflow:hidden;
text-align:center;
margin:0 auto;
}

nav ul {
margin:0 auto;
padding:0;
}

nav ul li {
display:inline;
}

nav > ul > li > a {
display:block;
line-height:50px;
text-decoration:none;
padding:0 24px;
}

nav > ul > li > a:hover {
color:#e89f65;
}

h3 {
padding-bottom:2vh;
text-align:justify;
border-bottom:1px grey solid;
display:block;
margin:5vh 6vh 0;
}

section {
padding:0 6vh 4vh;
}

footer {
background-color:#dfd9b9;
padding:1vh 0;
}

p {
font-size:12pt;
line-height:20pt;
letter-spacing:.1pt;
text-align:justify;
}

Answer 1

我自己找到了答案。这与手机的硬件加速无关。

在上面的样式表中，几乎每个元素都使用视口高度调整大小。使用Chrome在移动电话上滚动时，视口高度会在滚动后以某种方式更改，因此会更改使用vh设置样式的任何元素的大小。

我将每个vh更改为vw，因为垂直滚动时视口宽度不会改变。这解决了问题，现在在手机上浏览就像一个魅力。

作为预防措施，我禁用了水平滚动（overflow-x: hidden），因此vw永远不会在同一设备上更改。

CSS：在移动设备上，文章在滚动时跳过/跳转/移动

1 个答案: