我是 html/css 的新手，正在尝试部署一个非常基本的构造页面，但我不知道如何让它在移动设备上滚动。如果我在桌面上的 iphone 的 safari 浏览器开发人员工具中测试它，该页面将滚动，但不会在我的实际 iphone 设备上滚动。谁能帮我弄清楚如何修改它才能在设备上滚动？
@import url("font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,600,600italic");
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none;
}
mark {
background-color: transparent;
color: inherit;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input, select, textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
/* MAIN */
html {
background: url(./assets/gray-wood-background.png);
box-sizing: border-box;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 1080px;
width: 100%;
overflow: scroll;
}
body.preload *, body.preload *:before, body.preload *:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-ms-animation: none !important;
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
body, input, select, textarea {
color: #ffffff;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16pt;
font-weight: 300;
line-height: 1.65em;
}
section {
border: 1px solid white;
margin: 5% auto 5% auto;
text-align: center;
width: 70%;
}
hr {
width: 80%;
}
h1 {
padding: 40px;
font-size: 2em;
}
.logo {
height: 100px;
width: 333px;
}
.copyright {
text-align: center;
margin-top: 60px;
font-size: .65em;
}
@media all and (max-width: 480px) {
html {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.logo {
height: 76px;
width: 225px;
}
}<html lang="en">
<head>
<!-- meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- links -->
<link rel="stylesheet" href="construction-style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Developed by Gjoraas</title>
</head>
<body>
<!-- <div style="background-image: url(assets/gray-wood-background.png); width:100%; height:100%;"></div> -->
<!-- MAIN -->
<section>
<a href="construction.html"><img class="logo" src="assets/DGlogoTwhite.png" alt="Developed by Gjoraas logo"></a>
<h1>COMING SOON</h1>
<hr>
<p>Our website is currently under construction.</p>
<p>Please check back soon to learn more about our web and app development services.</p>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
<li>© Developed by Gjoraas 2018</li>
</ul>
</div>
</section>
</body>
</html>
最佳答案
我最终将高度设置得更大，为2000px，然后将低于780px的高度修改为1000px。接下来，我将背景图片更改为在正文中而不是 html 中。这种组合对我有用。
关于html - 网站不能在移动设备上垂直滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53547860/