我想让我的网站响应所有设备。它在台式机和 Android 手机上也能正常工作。但是，对于其他设备，如(Kindle Fire HDX、Nexus 7、iPad mini、iPhone 6、7、8、Ipad pro，网站不会向下滚动。我正在使用检查元素选项测试我的网站。
我正在使用以下查询来启用滚动，但它不起作用并且屏幕在上述设备上卡住了。
<!DOCTYPE html>
<html >
@media screen and (max-width: 1440px ) {
body {
overflow-x: hidden;
overflow-y: auto;
}
html {
overflow-x: hidden; }
nav{
display: none;}
}
@media screen and (max-width: 960px ) {
body {
overflow-x: hidden;
overflow-y: auto;
}
html{
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
header .headercontent {
width: 100%;
}
.page-wrap {
background: #fff ;
}
nav ul {
width: 100%;
}
section#hero {
width: 100%;
height: auto;
min-height: 40px;
}
div#hero {
width: 100%;
height: auto;
}
div #hero .cycle-slideshow {
min-height: 440px;
}
div.page div.content {
width: 85%;
padding-left: 5%;
padding-right: 5%;
}
div.page div.sidebar {
width: 90%;
margin: 0 5%;
padding: 0;
}
.bannerimage {
width: 90%;
padding: 5%;
position: static !important;
margin-left: auto;
margin-right: auto;
/*box-sizing: border-box;*/
float: left;
}
/* div#hero img {
max-width: 60%;
}*/
div.page {
width: 100%;
}
div.copyrightinner {
width: 100%;
}
footer div.info {
width: 100%;
}
}
@media screen and (max-width: 1920px) {
body {
overflow-x: hidden;
overflow-y: auto;
}
html {
overflow-x: hidden; }
nav{
display: none;
}
}
@media screen and (max-width: 805px) {
/* Do something about the footer */
/* html, body {
overflow-x: hidden;
}*/
.navbar{
display: none;
}
.bannerimage {
width: 90%;
padding: 5%;
position: static !important;
margin-left: auto;
margin-right: auto;
/*box-sizing: border-box;*/
float: left;
}
div.page, div.sidebar div.services {
overflow:hidden;
}
div.contentcontact h1{
display: none;
}
div.contentcontact{
height: 50px;
padding-top: 30px;
}
div.contentcontact p#blue{
display: none;
}
div.contentcontact img{
display: none;
}
.page-wrap {
background: #fff;
}
#slider-prev, #slider-next {
display: none;
}
div.page div.sidebar div.latestnews{
display:none;
}
.slider-image {
background-color: #fff;
margin-left: 0;
/* padding-left: 20px;*/
}
/* .slider-image h2 {
margin-top: 10px;
}*/
footer {
height: auto;
position: relative;
}
div.copyright {
background-color: #0053a0;
}
div.column2, div.column3
{display:none;
}
div.column1, div.column2, div.column3 {
float: none;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.page-wrap {
/*min-height: 80%;*/
margin-top: 0;
}
header
{
border-top: 3px solid #0053a0;
}
header div.logo {
float: none;
margin-left: auto;
margin-right: auto;
padding-right: 0;
width: 216px;
}
header h2.cta {
display: block;
float:none;
display:none;
}
nav {
display: none;
background: #02407c;
height: auto;
margin-bottom: 0;
border-bottom: 0;
}
nav ul {
border: 0;
margin-left: auto;
margin-right: auto;
}
nav ul li {
width: 100%;
border: 0;
border-bottom: 2px solid #0069BD;
}
nav li ul li a {
background-image: none !important;
padding-left: 50px;
}
nav ul li ul li a {
border-top: none;
border-bottom: none;
}
nav ul li ul li.last a {
border-bottom: none;
}
img {
max-width: 100%;
}
nav a {
width: 100%;
display: block;
}
div.mobilenavbtn {
display: block;
width: 100%;
background: #02407c;
position: relative;
padding-top: 3px;
}
div.mobilenavbtn .content {
width: 30px;
margin-left: auto;
margin-right: auto;
}
div.mobilenavbtn img {
margin-left: auto;
margin-right: auto;
height: 30px;
}
footer hr {
margin-bottom: 0;
}
div.copyright {
height: 80px;
padding-top: 20px;
border-bottom: 1px solid #fff;
}
div.copyright div.left {
float: none;
width: 100%;
text-align: center;
}
div.copyright div.right {
float: none;
width: 100%;
margin-top: 20px;
text-align: center;
}
div.search {
box-sizing: border-box;
margin-top: 0;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
margin-left: auto;
margin-right: auto;
background: #03386b;
}
div.smalllinks {
margin-top: 10px;
}
div.search form {
width: 180px;
margin-left: auto;
margin-right: auto;
position: relative;
}
div.breadcrumb ul {
margin-left: 20px;
}
nav li ul {
width: 100%;
visibility: visible;
position: static;
display: none;
}
nav {
position: relative;
z-index: 100;
}
nav .menucontainer {
width: 100%;
}
nav li ul li {
width: 100%;
}
nav ul li ul li a {
width: 100%;
}
div.breadcrumb {
width: 100%;
}
.services {
display: none;
}
.latestnews .image {
width: 100px;
margin-top: 20px;
float: left;
}
.latestnews .info {
display: none;
}
.latestnews .info:first-of-type {
width: 100%;
margin-top: 20px;
float: left;
padding-left: 10px;
font-size: 16px;
color: #03396d;
font-weight: 600;
display: block;
}
.readmore {
display: block;
height: 24px;
margin-top: 26px;
}
.latestpubs .viewall {
display: block;
height: 24px;
margin-top: 10px;
color: #03396d;
font-weight: 600;
}
.latestpubs .viewall a {
color:#03396d !important;
font-size: 15px;
}
.readmore img {
display: inline-block;
position: relative;
top: 4px;
left: 10px;
}
.readmore a {
color: #03396d;
}
.latestpubs .viewall img {
display: inline-block;
position: relative;
top: 4px;
left: 10px;
}
.latestnews h2 {
display: block;
width: 100%;
font-size: 20px;
padding-left: 30px;
padding-bottom: 5px;
border-bottom: 1px solid #0053a0;
background-image: url('/bundles/pcaapp/images/news.jpg');
background-repeat: no-repeat;
background-position: top left;
box-sizing: border-box;
}
.latestpubs h2 {
display: block;
font-size: 20px;
width: 100%;
padding-left: 30px;
padding-bottom: 5px;
border-bottom: 1px solid #0053a0;
background-image: url('/bundles/pcaapp/images/publications.jpg');
background-repeat: no-repeat;
background-position: top 2px left;
}
.services h2 {
display: block;
font-size: 20px;
width: 100%;
padding-left: 30px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: 1px solid #0053a0;
background-image: url('/bundles/pcaapp/images/services.png');
background-repeat: no-repeat;
background-position: top -1px left;
}
.services ul {
margin-left: 0;
margin-bottom: 20px;
}
.services ul li a {
color: #03396d;
font-size: 16px;
font-weight: 600;
}
.services ul li {
display: block;
background-image: url('/bundles/pcaapp/images/li.png');
background-repeat: no-repeat;
background-position: top 13px left;
padding-bottom: 8px;
padding-left: 25px;
border-bottom: 1px dotted #0053a0;
padding-top: 7px;
}
.services ul li.active a, .services ul li:hover a {
color: #e35b00;
}
.services ul li.active, .services ul li:hover{
background-position: top 13px left 5px;
}
.latestpubs ul {
list-style-image: url('/bundles/pcaapp/images/dlbullet.png');
margin-top: 10px;
margin-left: 20px;
}
.latestpubs ul li {
color: #0271d8;
font-size: 13px;
padding-top: 8px;
}
div.smalllinks {
width: auto;
}
}
/* iPad in portrait and below */
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
overflow-y: auto;
}
.latestnews .info {
width: 49%;
padding-left: 1%;
}
div.smalllinks {
text-align: center;
}
div.smalllinks ul {
margin-left: 0;
}
div.page div.content div.contact div {
width: 90% !important;
margin: 0 5% 20px 5%;
float: left;
}
div.contact form label {
margin-bottom: 5px;
width: 100%;
margin-left: 0;
}
div.contact form label {
margin-bottom: 5px;
width: 100%;
margin-left: 0;
}
div.contact {
height: auto;
padding-bottom: 20px;
}
div.page div.content #google_map {
width: 100% !important;
}
div.page div.content div.contact {
width: 100%;
}
div.contact input[type=text],
div.contact input[type=email],
div.contact textarea {
width: 90%;
padding: 3%;
left: 0;
}
}
@media screen and (max-width: 540px) {
body {
overflow-x: hidden;
overflow-y: auto;
}
.subFooter .break {
clear: both;
margin-bottom: 20px;
}
}
/* iPhone 6 Plus and below */
@media screen and (max-width: 414px) {
body {
overflow-x: hidden;
overflow-y: auto;
}
.latestnews .info {
width: 100%;
padding-left: 0;
}
footer h3 {
width: 100%;
}
ul.news-articles li article div h3 {
margin-bottom: 5px;
}
div.contact form label {
margin-left: 0;
width: 100%;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
body {
overflow-x: hidden;
overflow-y: auto;
}
header div.logo a {
background-image: -webkit-image-set( url('/bundles/pcaapp/images/site_logo.jpg') 1x,
url('/bundles/pcaapp/images/site_logo_2x.png') 2x);
}
}
nav a {
text-decoration: none;
color: inherit;
}
nav {
/* border-top: 1px solid #04294d; */
/* border-bottom: 2px solid #04294d; */
height: 37px;
/* background: url('/bundles/pcaapp/images/nav_bg.jpg') repeat-x; */
}
nav ul li { display: inline;
}
nav .menucontainer {
width: 980px;
margin-left: auto;
margin-right: auto;
position: relative;
}
nav ul {
list-style-type: none;
float: left;
}
ul {
display: block;
margin: 0;
padding: 0;
}
nav ul li {
position: relative;
float: left;
}
nav ul li a {ow
box-sizing:border-box;
padding-left: 17px;
padding-right: 17px;
color: #fff;
text-transform: uppercase;
height: 39px;
display: inline-block;
padding-top: 10px;
font-size: 14px;
float: left;
}
nav ul li.first {
}
nav ul li.current, nav ul li.current a, nav ul li:hover, nav ul li:hover > a {
border-bottom: 1px solid #0069BD;
}
nav ul li.last a {
}<!DOCTYPE html>
<html >
<! head >
<head profile="http://www.w3.org/2005/10/profile"> <! image displayed on the tab alongwith the title>
<link rel="icon"
type="image/png"
href="images/logo.jpg" /> <! image displayed on the tab alongwith the title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <! encoding scheme>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>Marvel Tech</title> <!title of the tab>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <!icons used in footer>
<link rel="stylesheet" href="style.css" /> <!stylesheet Linking>
<script src="jquery.min.js"></script> <! javascript used for slider animation>
<script type='text/javascript' src='slider.js'></script> <! javascript used for slider animation>
</head>
<! Body>
<body>
<div class="page-wrap">
<!- Header section >
<header>
<div class="headercontent">
<div class="logo">
<img src="images/newlogo.jpg" >
</div>
<div class="navbar">
<a class="current" href="Marvel_Tech.html">Home</a>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i> <!arrow displayed next to drop-down list>
</button>
<div class="dropdown-content">
<a href="Services.html">Design</a>
<a href="Services.html">Consulting</a>
<a href="Services.html">R&D</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Software
<i class="fa fa-caret-down"></i> <!arrow displayed next to drop-down list>
</button>
<div class="dropdown-content">
<a href="Software.html">Steam Turbine Design Package</a>
<a href="Software.html">Gas Turbine Design Tools</a>
<a href="Software.html">Power Plant Monitoring</a>
<a href="Software.html">Prognostic System</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i> <!arrow displayed next to drop-down list>
</button>
<div class="dropdown-content">
<a href="Products.html">ORC Turbine</a>
<a href="Products.html">Gas Turbine</a>
<a href="Products.html">Saturated Team Turbine</a>
</div>
</div>
<a href="About.html">About</a>
<a href="Contact.html">Contact </a>
<div class="dropdown">
<button class="dropbtn">Language
<i class="fa fa-caret-down"></i> <!arrow displayed next to drop-down list>
</button>
<div class="dropdown-content">
<a href="Marvel_Tech.html"><img src="images/english.png"> English </a>
<a href="Marvel_Tech_Chinese.html"><img src="images/chinese.png"> Chinese </a> <!- Mention the name of chinese page in place of hash.>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!–– Navigation Bar to be dispalyed in mobiles and tablets>
<nav>
<div class="menucontainer">
<ul>
<li class="current first"> <a href="Marvel_Tech.html">Home</a></li>
<li> <a href="Services.html">Services</a></li>
<li> <a href="Software.html">Software</a></li>
<li> <a href="Products.html">Products</a></li>
<li> <a href="About.html">About</a></li>
<li > <a href="Contact.html">Contact </a></li>
<li class="last"> <a href="Contact.html">Language </a></li>
</ul>
</div>
</nav>
<!- Navigation bar icon displayed on mobiles and tablets>
<div class="mobilenavbtn">
<div class="content">
<a href="#"><img src="images/mobilenavbtn.png" alt="Menu"></a>
</div>
</div>
<!- Slider Section >
<section id="hero">
<div id="hero" style="position:relative;">
<div id="slider-prev">
<img src="images/slide_left.png" alt="Previous Slide"> <!image of arrow head on the left side of the slider to slide on previous image>
</div>
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-slides="> div" data-cycle-prev="#slider-prev" data-cycle-next="#slider-next" style="position: relative
; overflow: hidden;"> <! slider animation>
<div class="slider-image cycle-slide" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 95; opacity: 1; display: block; visibility: hidden;">
<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
<img src="images/Turbomachinery.jpg"> <! slider image>
</div>
<div style="position: absolute; z-index: 80; background-color: rgba(255,255,255,0.9); top: 200px; left: 655px;" class="bannerimage">
<h2>Steam Turbine <em>Technology</em></h2>
<p align="justify">We are experts in the design, retrofit and analysis of steam turbines of all scales. With complete and powerful in-house design tools and procedures, we can design steam
turbines from 1MW up to 1000MW.
</p> <! text on slider image>
<div class="readmore">
<a href="/services/turbomachinery-design">Read More</a>
</div>
</div>
</div>
<! Second image of the slider>
<div class="slider-image cycle-slide cycle-slide-active" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 99; visibility: visible; opacity: 1; display: block;">
<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
<img src="images/engine.png">
</div>
<div style="position: absolute; z-index: 80; background-color: rgba(255,255,255,0.9); top: 170px; left: 655px;" class="bannerimage">
<h2>Special Turbomachinery <em>Products</em></h2>
<p align="justify">We design, test and build not only traditional turbomachinery, but also products with completely new concepts like TRT
(Top-gas Recovery Turbine), ORC (Organic Rankine Cycle) turbines, SCO2 (super-critical CO2) compressors and turbines.
</p>
<div class="readmore">
<a href="/services/turbomachinery-design">Read More</a>
</div>
</div>
</div>
<!- Third image of the slider>
<div class="slider-image cycle-slide cycle-slide-active" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 99; visibility: visible; opacity: 1; display: block;">
<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
<img src="images/power.jpg">
</div>
<div style="position: absolute; z-index: 80; background-color: rgba(255,255,255,0.9); top: 185px; left: 655px;" class="bannerimage">
<h2>Power Plant <em>Technology</em></h2>
<p align="justify">We develop our unique digital solution for the monitoring and prognostic system of the whole Combined Cycle Power Plants. This system is able to record and predict the performances of key equipment
in CCCP like gas and steam turbine, HRSG.
</p>
<div class="readmore">
<a href="/services/turbomachinery-design">Read More</a>
</div>
</div>
</div>
<! Fourth image of the slider>
<div class="slider-image cycle-slide" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 1; display: block;">
<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
<img src="images/aircraft.jpg">
</div>
<div style="position: absolute; z-index: 80; background-color: rgba(255,255,255,0.9); top: 210px; left: 655px;" class="bannerimage">
<h2>Aircraft <em>Propulsion</em></h2>
<p align="justify"> We provide design and consulting services for key components of the aircraft engines.
For aerodynamic problems of the aircraft like the fuselage, engine housing etc. we can also deliver experienced design and analysis services.
.</p>
<div class="readmore">
<a href="/services/turbomachinery-design">Read More</a>
</div>
</div>
</div>
<! Fifth image of the slider>
<div class="slider-image cycle-slide" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 1; display: block;">
<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
<img src="images/industrail compressor.jpg">
</div>
<div style="position: absolute; z-index: 80; background-color: rgba(255,255,255,0.9); top: 210px; left: 655px;" class="bannerimage">
<h2>Gas Turbine <em>Technology</em></h2>
<p align="justify">We have long years of experiences in gas turbine development. We have independent design capabilities of gas turbine compressors, combustors and turbine blades, all from
scratch to tests and delivering top performance design.
</p>
<div class="readmore">
<a href="/services/turbomachinery-design">Read More</a>
</div>
</div>
</div>
<! Sixth image of the slider>
<div class="slider-image cycle-slide" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 1; display: block;">
<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
<img src="images/rods.png">
</div>
<div style="position: absolute; z-index: 80; background-color: rgba(255,255,255,0.9); top: 230px; left: 655px;" class="bannerimage">
<h2 >Combustion <em>Technology</em></h2>
<p align="justify">We understand the combustion processes very well and are few of the teams in world that can exactly calculate complex combustion processes from household boilers to large gas
turbines.
</p>
<div class="readmore">
<a href="/services/turbomachinery-design">Read More</a>
</div>
</div>
</div>
</div>
<div id="slider-next"> <!image of arrow head on the right side of the slider to slide on previous image>
<img src="images/slide_right.png" alt="Next Slide">
</div>
</div>
</section>
<!- Overview section >
<div class="pagecontainer">
<div class="page">
<div class="content" style="clear: both;">
<h1 class="homepage">Marvel-Tech Limited provides following services and product for both domestic and international clients:
</h1>
<ul>
<li ><div class="readmore"><a href="#">Gas Turbine Technology:</i></a> Design, Retrofit and Analysis, R&D, Design Tools, test support</li>
<li><div class="readmore"><a href="#">Steam Turbine Technology: </i></a> Design and Analysis, R&D, Design Tools</li>
<li><div class="readmore"><a href="#">Power Plant Technology: </i></a> CCCP Monitoring and Prognostic System </li>
<li><div class="readmore"><a href="#">Combustion Technology: </i></a> Design, Analysis, R&D, test support, design tools </li>
<li><div class="readmore"><a href="#">Aircraft Propulsion: </i></a> Design, Analysis, R&D, Design Tools</li>
<li><div class="readmore"><a href="#">Special turbomachinery: </i></a> Concept and Detailed Design, test, R&D</li></ul>
</div>
<!- News Section >
<div class="sidebar">
<div class="latestnews">
<h2>Latest <em>News</em></h2>
<! First News>
<div class="info">Marvel Tech was crowned champions in intelligent manufacturing.<! News Headline>
<p>The Pujian branch of Caohejing Hi-tech Park held the final of the intelligent manufacturing section of Shanghai Youth Innovation and Entrepreneurship
Competition. </p>
<div class="readmore"><a href="#">Read More <i class="fa fa-external-link" aria-hidden="true"></i></a> <! read more link and symbol in front of read more>
</div>
</div>
<! Second News>
<div class="info">IMechE Webinar on centrifugal compressor design
<p>Hear the seminar given by Hamid Hazby and Mick Casey online via the IMechE's website.</p>
<div class="readmore"><a href="#">Read More <i class="fa fa-external-link" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!- Footer Section >
<footer>
<div class="info">
<! First Column in the footer>
<div class="column1">
<h3>Marvel<span><em>Tech</em></span></h3>
<p>
<a href="Marvel_Tech.html">Home</a>
.
<a href="Services.html">Services</a>
.
<a href="Software.html">Software</a>
.
<a href="Products.html">Products</a>
.
<a href="About.html">About</a>
.
<a href="Contact.html">Contact</a>
</p>
<p>MARVEL-TECH LIMITED © 2016</p>
</div>
<! Second Column in the footer>
<div class="column2">
<h3>Contact Us</h3>
<div class="footer-center">
<div>
<span><i class="fa fa-map-marker"></i> <! adding the location symbol>
<p>Dongchuan Road No. 555<br> Minhang, Shanghai</p>
</span>
</div>
<div>
<i class="fa fa-phone"></i> <! adding the phone symbol>
<p>+86 60676923</p>
</div>
<div>
<i class="fa fa-envelope"></i> <! adding the email symbol>
<p> <a href="mailto:info@marvel-tech.cn">info@marvel-tech.cn</a>
</p>
</div>
</div>
</div>
<! Third Column in the footer>
<div class="column3">
<h3>About the Company</h3>
<div class="footer-right">
<p align="justify" class="footer-company-about">
Since 2015, we have been providing a range of innovative services on design, calculations and expertise for energy conversion machinery.
</p>
</div>
</div>
</div>
</footer>
</body>
</html>我该如何解决这个问题，让网站也适应这些设备。
最佳答案
你试过吗:
body {
overflow-x: hidden;
overflow-y: auto;
}
关于html - 该网站不会在 Kindle Fire HDX 等少数布局上向下滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55762136/