iPhone добавляет верхнее поле к изображению

При проверке моего адаптивного сайта на моем ноутбуке он хорошо масштабируется с использованием процентов, но когда я проверяю его на своем iPhone, он добавляет огромное верхнее поле к моему вертикальному ряду изображений. Есть идеи, почему? Сайт находится здесь http://edharrisondesign.com/pocketpictograms/.

Заранее спасибо!

HTML:

    <!-- Pocket
================================================== -->

    <figure>
        <div class="main-pocket"><img src="images/assets/pocket.png"></div>
        <div class="padding"></div>
    </figure>

<!-- Icons
================================================== -->

    <div class="inside-pocket">
        <div class="icon-container">
            <img class="pictogram" src="images/pocket-pics/pencil.png"> 
            <img class="pictogram" src="images/pocket-pics/iphone.png"> 
            <img class="pictogram" src="images/pocket-pics/earphones.png">  
            <img class="pictogram" src="images/pocket-pics/camera.png"> 
            <img class="pictogram" src="images/pocket-pics/film.png">   
            <img class="pictogram" src="images/pocket-pics/scalpol.png">    
            <img class="pictogram" src="images/pocket-pics/paintbrush.png"> 
            <img class="pictogram" src="images/pocket-pics/fineliner1.png"> 
            <img class="pictogram" src="images/pocket-pics/fineliner2.png"> 
            <img class="pictogram" src="images/pocket-pics/notepad.png">    
            <img class="pictogram" src="images/pocket-pics/mouse.png">  
            <img class="pictogram" src="images/pocket-pics/glasses.png">    
            <img class="pictogram" src="images/pocket-pics/lighter.png">    
            <img class="pictogram" src="images/pocket-pics/pipe.png">   
            <img class="pictogram" src="images/pocket-pics/flask.png">  
            <img class="pictogram" src="images/pocket-pics/matches.png">    
            <img class="pictogram" src="images/pocket-pics/watch.png">  
            <img class="pictogram" src="images/pocket-pics/pocket-watch.png">   
            <img class="pictogram" src="images/pocket-pics/key.png">    
            <img class="pictogram" src="images/pocket-pics/car-key.png">    
        </div>             
    </div>

CSS:

figure {
    z-index: 97;
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 40%;
    text-align: center;
}  

.padding {
  z-index: 95;
  position:  relative;
  background-color: #D2D2D2;
  height: 100%;
  width: 100%;
  top: -50px;
  overflow: hidden;
  border-bottom: 50px solid #D2D2D2;
}    

.main-pocket img {
   z-index: 96;
   position: relative;
   width: 30%;
   height: auto;
   margin: 0 auto;
   max-width: 300px;
} 

 .inside-pocket {
   width: 100%;
   height: 100%;
   position: absolute;
   margin: 0 auto;
   text-align: center;
 }

 .icon-container {
    position: relative;
    max-width: 300px;
    width: 30%;
    top: 37%;
    margin: 0 auto;
}

.pictogram {
    height: auto;
    width: 100%;
    margin-bottom: 200%;
}

iphone image scale percentage margin
person Ed Harrison    schedule 14.03.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, я знаю, где я ошибся - я должен был установить верхнее поле для класса .inside-pocket, а не для класса .icon-container. Разметка здесь:

/* #Pocket
================================================== */
figure {
z-index: 97;
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 40%;
text-align: center;
}  

.padding {
z-index: 95;
position:  relative;
background-color: #D2D2D2;
height: 100%;
width: 100%;
top: -50px;
overflow: hidden;
border-bottom: 50px solid #D2D2D2;
}    

.main-pocket img {
z-index: 96;
position: relative;
width: 30%;
height: auto;
margin: 0 auto;
max-width: 300px;
} 

.inside-pocket {
width: 100%;
height: 100%;
top: 37%;
position: absolute;
margin: 0 auto;
text-align: center;
}

.icon-container {
position: relative;
max-width: 300px;
width: 30%;
margin: 0 auto;
}

.pictogram {
height: auto;
width: 100%;
margin-bottom: 200%;
}

Если бы кто-нибудь мог сообщить мне, ПОЧЕМУ это правильно, было бы здорово! Ваше здоровье

person Ed Harrison    schedule 14.03.2013