J'utilise bootstrap pour prévisualiser le périphérique mobile comme suit:
[.____]
Cela fonctionne parfaitement en chrome. Mais pas sur le bord :(
Mon code HTML/CSS est le suivant:
.frame {
border-radius: 15px;
background-color: #b3b6b9;
height: 400px;
padding: 50px 10px 75px 10px;
}
.screen {
border-radius: 10px;
background-color: #ffffff;
height: -webkit-fill-available;
padding: 20px 15px 150px 15px;
}
.circle {
border: 1px solid;
border-color: #ffffff;
border-radius: 50px;
height: 50px;
width: 50px;
margin: 10px auto;
position: relative;
}
.preview {
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 0px;
background-color: #dee0e2;
height: -webkit-fill-available;
}
<div class="col-4">
<div class="row">
<div class="col-12">
<p>Preview</p>
<div class="frame">
<div class="screen">
<div class="preview"></div>
</div>
<div class="circle">
</div>
</div>
</div>
</div>
</div>
Mais la mise en page ne fonctionne pas bien à bord. Je suppose qu'il y a quelque chose à voir avec la hauteur de la déclaration CSS: -WebKit-remplissable disponible;
La disposition du périphérique mobile en bord est présentée ci-dessous pour votre référence.
Notez que l'aperçu DIV n'est pas également affiché à Edge:
Utilisation min-height
pour IE pour remplir l'espace disponible
min-height: 100%; in IE