CSS:在移动设备上，滚动时文章会跳过/跳跃/移动

在移动设备（Android、Chrome、全高清屏幕、人像）上浏览以下代码时，lorem ipsum文本及其标题（"主页"）在滚动时似乎会轻微"跳过"。更准确地说，文章元素似乎被拉伸到右下角，大约10倍。

我读过关于这个问题的文章，似乎有一个解决方案，你可以用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;
}

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

在上面的样式表中，几乎每个元素都是使用视口高度来调整大小的。当使用Chrome在手机上滚动时，滚动后视口高度会发生变化，因此会更改任何样式为vh的元素的大小。

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

相关内容

最新更新

热门标签：