網站無法在移動設備上垂直滾動
[英]Site not vertically scrolling on mobile device
問題描述
我是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>
1 個解決方案
解決方案1
0 2018-12-03 22:07:35
我最終將高度設置為2000px，然后在780px以下將高度修改為1000px。 接下來，我將背景圖像更改為正文，而不是html。 這種組合對我有用。
自適應網站無法在移動設備上垂直滾動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.