Good night, I made a responsive website and I was testing in mozilla to see how it was on the mobile devices and it seemed okay, but when I put it in the air it was not what I expected.
This is how I tested it and how I wanted it:
That'showyouwanteditwhenyouloadedyourselfintocontacts: 
Andthat'showitwentonthephone: 
WhatcanIdosothatmysitedoesnothavethesizeofthedisplay,butthedimensionavailablealreadywiththebrowserdefinitionbars,inthiscasetheiphonesafari?
Ileavemycodesotheycansee.html:
$(document).ready(function(){
$('footer').on('click', function(){
$(this).toggleClass('sobe');
});
// Definir a altura do section entre a imagem e o footer
var altura = $('#foto').height();
$('section').css('height', '100vh').css('height', '-='+ altura).css('height', '-=44px');
// Definir a altura da imagem dentro da section
var altura_section = $('section').height();
$('section img').css('height', altura_section);
});
$(window).resize(function(){
var altura = $('#foto').height();
$('section').css('height', '100vh').css('height', '-='+ altura).css('height', '-=44px');
var altura_section = $('section').height();
$('section img').css('height', altura_section);
});@import url('https://fonts.googleapis.com/css?family=Muli');
* {
margin: 0;
padding: 0;
font-family: 'Muli', sans-serif;
overflow: hidden;
}
h3 {
color: #025aa4;
text-align: center;
}
#container {
height: 100vh;
width: 100%vw;
margin: auto;
}
header {
margin-bottom: -2px;
width: 100%;
height: auto;
background: url('../_img/untitled-2.jpg') no-repeat ;
background-size: 100vw;
background-attachment: fixed;
}
section {
width: 100vw;
position: relative;
text-align: center;
}
section img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
section p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
letter-spacing: 2px;
word-spacing: 10px;
color: #fff;
font-size: 350%;
font-weight: bolder;
text-shadow: 5px 5px 4px rgba(0,0,0, .6);
}
footer {
position: fixed;
bottom: 0px;
width: 100vw;
height: 40px;
transition: height 1s ease;
}
.sobe {
height: 100vh;
}
footer i {
color: #025aa4;
}
footer .cabecalho-footer {
position: relative;
background-image: none;
background-color: #025aa4;
height: 40px;
width: 100%;
cursor: pointer;
}
footer .cabecalho-footer i {
opacity: 0;
color: #fff;
font-size: 30px;
position: absolute;
top: 50%;
right: 10px;
transform: translate(-0%, -50%);
}
footer .cabecalho-footer h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
color: #fff;
font-family: 'Advent Pro', sans-serif;
letter-spacing: 3px;
}
footer .contacto-flow {
box-sizing: border-box;
width: 100%;
height: 100vh;
overflow: scroll;
background-color: #fff;
}
footer .contactos {
width: 100%;
height: auto;
background: #fff;
text-align: center;
line-height: 25px;
}
footer .horario {
margin-bottom: 100px;
}
@media all and (orientation:landscape) {
#container {
position: relative;
}
section {
position: absolute;
top: 68%;
left: 50%;
transform: translate(-50%, -68%);
padding: 80px;
background-color: rgba(0,0,0, .5);
}
section img {
visibility: hidden;
}
section p{
visibility: initial;
}
footer .contactos {
font-size: 20px;
}
.contactos p {
line-height: 45px;
}
}
@media screen and (min-width: 1025px) {
footer .contacto-flow .contactos{
box-sizing: border-box;
margin: auto;
width: 75%;
height: 100vh;
overflow: hidden;
box-shadow: 2px 2px 10px 5px rgba(0,0,0, .2);
}
}<!DOCTYPE html>
<html lang="pt-pt">
<head>
<title>Estores JF</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="_css/estilo.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="_img/Estores_JF.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scripttype="text/javascript" src="_js/jquery.js"></script>
</head>
<body>
<div id="container">
<header>
<img id="foto" src="_img/untitled-2.jpg" style="visibility: hidden; width: 100vw;" />
</header>
<section>
<img src="_img/Brevemente.gif"/>
<p>BREVEMENTE DISPONÍVEL!</p>
</section>
<footer>
<header class="cabecalho-footer">
<h1>CONTACTOS</h1>
<i class="fa fa-times" aria-hidden="true"></i>
</header>
<div class="contacto-flow">
<div class="contactos">
<div class="morada">
<br>
<h3>Morada:</h3>
<p><i class="fa fa-home" aria-hidden="true"></i>  
Rua Fonte da Carreira, nº 350 <br>
Pav. A2, Parque Empresarial Fonte da Carreira <br>
Adroana <br>
2645-467 Manique</p> <br>
<p><i class="fa fa-map-marker" aria-hidden="true"></i>  
N38°44'24" - W9°22'40"</p><br>
</div>
<div class="contacto">
<h3>Contacto:</h3>
<p><i class="fa fa-phone" aria-hidden="true"></i>  
Tel. 21 421 50 78</p>
<p><i class="fa fa-fax" aria-hidden="true"></i>  
Fax. 21 421 13 21</p>
<p><i class="fa fa-envelope" aria-hidden="true"></i>  
[email protected]</p><br>
</div>
<div class="horario">
<h3>Horário:</h3>
<p><i class="fa fa-clock-o" aria-hidden="true"></i>  
2ª a 6ª das 9 - 12.30 / 14 - 17.30</p>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>