#html #css
#HTML #css
Вопрос:
Я хочу сделать свой сайт адаптивным ко всем устройствам. Он также отлично работает на настольных компьютерах и телефонах Android. Однако для других устройств, таких как (Kindle Fire HDX, Nexus 7, iPad mini, iPhone 6,7,8, Ipad pro), веб-сайт не прокручивается вниз. Я тестирую свой веб-сайт, используя опцию inspect element.
Я использую следующий запрос, чтобы включить прокрутку, но он не работает, и экран зависает для вышеупомянутых устройств.
<!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">Ramp;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, Ramp;D, Design Tools, test support</li>
<li><div class="readmore"><a href="#">Steam Turbine Technology: </i></a> Design and Analysis, Ramp;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, Ramp;D, test support, design tools </li>
<li><div class="readmore"><a href="#">Aircraft Propulsion: </i></a> Design, Analysis, Ramp;D, Design Tools</li>
<li><div class="readmore"><a href="#">Special turbomachinery: </i></a> Concept and Detailed Design, test, Ramp;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 IMechEamp;#039;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> Как я могу решить эту проблему, чтобы сделать веб-сайт адаптируемым и к этим устройствам?
Комментарии:
1. Возможно ли увидеть ваш фактический веб-сайт? или пример веб-сайта? это было бы сделано для того, чтобы мы могли четко видеть, о чем вы на самом деле говорите?
2. @Tigerrrrr Я добавил код в исходное сообщение для вашей справки.
3. @Tigerrrrr Мне нужно это исправить
Ответ №1:
Вы пробовали:
body {
overflow-x: hidden;
overflow-y: auto;
}