html - 在 iPad/平板电脑上查看页脚后出现大量死 Angular

标签 html css ipad media-queries

我真的需要一些帮助。出于某种原因，当我在 iPad 上查看网站时，页脚后出现了一个厚脸皮的巨大死 Angular 。我附上了图片和代码。会很感激一些帮助。

干杯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

最佳答案

您的代码没问题，但关键是内容区域有一些数量，而在 ipad 和移动设备上必须进行更改，例如设置为占用空白区域。

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

关于html - 在 iPad/平板电脑上查看页脚后出现大量死 Angular ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38158921/

上一篇：php - css3 多个背景图片在移动时淡入淡出

下一篇：html - 画廊出现分散的CSS下拉菜单

相关文章：

javascript - 如果结果是 404 http 错误，则隐藏 iframe(带有 .cgi 源)

iphone - 在 iOS 中，如何将图像嵌入到文本中(在 UITextView 中)？

java - 使用java识别硬件设备

macos - 从 iPad 和 iPhone 连接到在 Mac 上运行的 Laravel Homestead、Vagrant

javascript - Ajax 发布方法不起作用

html - 使 div 在固定位置元素上方滚动

html - 为 6 个单元格配置 Bootstrap 以自动适应具有响应图像的全屏

jQuery UI slider 小部件 + fancybox + 缩放/缩放

html - 在 html 页面的打印预览中，一半的内容出现在下一页

php - 使用 dompdf 打印 pdf 表格无法正常工作

©2024 IT工具网  联系我们