在ipad /平板电脑上观看页脚后的大量死亡空间

时间：2016-07-02 10:05:28

标签： html css ipad media-queries

我真的需要一些帮助。出于某种原因，当我在ipad上查看网站时，我会在页脚后面得到一个厚颜无耻且巨大的死区。我附上了一张照片和代码。会感激一些帮助。

干杯Xoxo 

html, body{
    margin:0em;
    padding:0em;
    font-size: 100%;
}
/* ---------------------Navigation-------------------------*/
ul{
    margin:0;
    padding: 0;
    display: inline-block;
    position: fixed;
    list-style-type: none;
    text-decoration: none;
    width: 100%;
    background-color:white;
    border-bottom: 0.063em lightgrey solid;
    z-index: 20;
}

ul li {float: left;
width: 20%;}

ul li a{display: inline-block;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  padding-bottom: 0.400em;
  padding-top: 0.400em;
  transition: 0.4s;
  font-size: 1.063em;
  width: 100%;
  height: 2%;
  color: black;
  z-index: 20;
}

li{text-align:center;
color: black;}

ul li a:hover {background-color: #ffbc00;}

/* ---------------------Navigation End-------------------------*/

/* --------------------- Mobile Start------------------*/

@media only screen and (max-width: 800px) {
    body{font-size:60%;}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 4)  {body{font-size: 80%;} }
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { body{font-size: 80%}}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {.pick-a, .pick-b, .pick-c{display: block;float: none;}}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {body{font-size: 45%}}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { body{font-size: 31%} }


/* --------------------- Mobile End------------------*/
/* ---------------------Main Body Start--------------*/
.main-body{
width: 100%;
height: 38.125em;
display: inline-block;
}

.pick-a, .pick-b, .pick-c{
width: 33%;
height: 100%;
float: left;
display: inline-block;
border: 0.063em solid black;
text-align: center;
}


.pick-a{
background-image: url("http://s20.postimg.org/nyc3bxswt/photo_1431605695381_f4a9c3cdd150.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;}

.pick-a:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
 }

 .pick-b{
 background-image: url("http://s20.postimg.org/9ug83jlp9/photo_1457904375453_3e1fc2fc76f4.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;}

.pick-b:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
 }

.pick-c{background-image: url("http://s20.postimg.org/n6no1c9st/photo_1427751840561_9852520f8ce8.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;}

 .pick-c:hover{
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
 }

.circle-a{
    width: 30%;
    height: 20%;
    border: 0.063em solid #f8353e;
    margin: 0 auto;
    border-radius: 50%;
    margin-top: 20%;
    background-image: url("http://s20.postimg.org/6x686jwyl/animat_network_color.gif"); 
background-size: contain;
background-position: center;
}

.circle-b{width: 30%;
    height: 20%;
    border: 0.063em solid #f59f36;
    margin: 0 auto;
    border-radius: 50%;
    margin-top: 20%;
    background-image: url("http://s20.postimg.org/5orjcejrx/animat_rocket_color.gif");  
background-size: contain;
background-position: center;}

.circle-c{width: 30%;
    height: 20%;
    border: 0.063em solid green;
    margin: 0 auto;
    border-radius: 50%;
    margin-top: 20%;
    background-image: url("http://s20.postimg.org/c50i2hsbh/animat_barchart_color.gif");    
background-size: contain;
background-position: center;}

/* ---------------------Main Body End------------------*/
/* ---------------------Footer Start---------------------------*/
.footer{
    height:12.500em;
    width: 100%;
    background-color: #414141; 
    margin-top: -0.5%;
}

.logo-buttons{
    width: 20%;
    height: 30%;
    margin: 0 auto;
}

.xing{
width: 100%;
height:100%;
background-image: url("http://s20.postimg.org/9vizr66fx/XING_grau_180_180_180.png");
background-position: center;
background-size: contain;
border-radius: 50%;
}

.linkedin{
width: 100%;
height:100%;
background-image: url("http://s20.postimg.org/m1csfbajh/linkedin.png");
background-position: center;
background-size: contain;
border-radius: 50%;}

.twitter{
width: 100%;
height:100%;
background-image: url("http://s20.postimg.org/s3kf5syzh/twitter_512.png");
background-position: center;
background-size: contain;
border-radius: 50%; 
background-size: 67%;
background-repeat: no-repeat;
}

.network-buttons{
    width: 20%;
    height: 80%;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    left: 13%;
    margin-top: 6%;
    padding-right: 10%;
}

.table-links{
width: 40%;
height: 60%;
margin:0 auto;
}

table{
margin: 0 auto;
text-align: center;
margin-top: 5%;
}

.footer-th{font-family: 'Roboto', sans-serif;font-size: 1.125em;color:white;font-weight: 400;padding: 4%;}

.footer-td{font-family: 'Roboto', sans-serif;font-size: 0.875em;color:#ababab;;font-weight: 400;}


/* ---------------------Footer End---------------------*/
/* ---------------------Fonts Start---------------------*/

h1{font-family: 'Roboto Slab', serif;color: #444; font-weight: 300;letter-spacing: -.2px; font-size: 3.000em;}

h2{font-family: 'Roboto Slab', sans-serif;font-size: 2.375em;color: #444;font-weight: 300;letter-spacing: -.1px;}

h3{font-family: 'Roboto',sans-serif;font-weight: 400;color:#444;font-size: 1.375em;}

h4{font-family: 'Roboto', sans-serif;font-size: 1.200em;color: #848484;font-weight: 400;}

h5{font-family: 'Montserrat', sans-serif;color: white; font-size: 1.875em; font-weight: 400;letter-spacing: -.02em;}

p{font-family: 'Roboto', sans-serif;font-size: 1.125em;color: #848484; font-weight: 300;}
/* ---------------------Fonts End---------------------*/

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="choose.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jobs</title>
</head>
<body>
<ul>
    <li><a href=""><span style="font-family: 'Roboto', sans-serif;font-size: 1.000em;color: #444;font-weight: 400;">F<span style="color:#ff5252;font-size:1.000em;">.</span>LINT</span></a></li>
    <li><a href="#test"><span style="font-family: 'Roboto', sans-serif;font-size: 1.000em;color: #444;font-weight: 400;"><span style="color:#ff5252;font-size:0.625em;">LIVE </span>JOBS</span></a></li>
    <li><a href=""><span style="font-family: 'Roboto', sans-serif;font-size: 1.000em;color: #444;font-weight: 400;">EXPERTISE</span></a></li>
    <li><a href=""><span style="font-family: 'Roboto', sans-serif;font-size: 1.000em;color: #444;font-weight: 400;">KONTAKT</span></a></li>
    <li><a href=""><span style="font-family: 'Roboto', sans-serif;font-size: 1.000em:color: #444;font-weight: 400;">FAQs</span></a></li>
</ul>
    <div class="wrapper">
    <div class="main-body">
    <div class="pick-a"><div class="circle-a"></div><h5>WEBANALYTICS</h5></div>
    <div class="pick-b"><div class="circle-b"></div><h5>DATA SCIENCE</h5></div>
    <div class="pick-c"><div class="circle-c"></div><h5>BUSINESS INTELLIGENCE</h5></div>
    </div></div>
<div class="footer">
    <div class="logo-buttons">
        <div class="network-buttons"><div class="xing"></div></div>
        <div class="network-buttons"><div class="linkedin"></div></div>
        <div class="network-buttons"><div class="twitter"></div></div>
    </div>
    <div class="table-links">
        <table>
            <thead>
                <tr>
                    <th class="footer-th">HOME</th>
                    <th class="footer-th">EXPERTISE</th>
                    <th class="footer-th">KONTAKT</th>
                    <th class="footer-th">JOBS</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="footer-td">FAQs</td> 
                    <td class="footer-td">IMPRESSUM</td>
                  <td class="footer-td">REFERRAL</td>
                    <td class="footer-td">BLOG</td>
                    </tr>
            </tbody>
        </table>
    </div>
</div>
</div>
</body>
</html>

] 1

3 个答案:

答案 0 :(得分：0)

你的代码还可以，但关键是内容区域有一些数量，而在ipad和移动设备上，必须进行更改，就像设置占据空白一样。

@media only screen and (max-width: 991px) { 
.pick-a, .pick-b, .pick-c { width: 1000%; }
}

答案 1 :(得分：0)

footer {
height: 12.500em;
width: 100%;
background-color: #414141;
margin-top: 12.5%;
}

保证金最高价已经改变。

答案 2 :(得分：0)

为所有答案干杯。发送我的爱！我尝试了你的建议，但它不知道为我做了什么。然而，我实际上最终玩了媒体查询字体大小，因为我一直在使用em。我将媒体查询字体大小增加到100％，它对我有用，我得到全屏（ipad等），没有任何死空间！我想这是因为我在编码过程中只使用了em，死区是由于缺少固定的px引用而创建的。无论如何，再次欢呼帮助。我将确保做出贡献，以保持库存流量蓬勃发展。继续编码！所有最好的A.！

相关问题
最新问题