Layout flessibile della finestra CSS su iPad

Question

Sto cercando di ottenere un layout molto semplice utilizzando il modello flessibile che funziona su iPad.

Ho un div contenente che dovrebbe centrare il contenuto div.

Il codice di esempio funziona come previsto su tutti i browser e piattaforme ECCETTO sull'iPad (retina).

L'utilizzo di vari emulatori iPad online non consente di replicare il problema. Sono stato in grado di replicarlo solo sull'iPad attuale. Ecco uno screenshot di quello che sembra:

Qualsiasi e tutti i consigli sarà apprezzato molto.

CSS:

.container { 
width: 510px; 
height: 310px; 
background: red; 
display: flex; 
display: -webkit-flexbox; 
display: -ms-flexbox; 
display: -webkit-flex; 
flex-direction: row; 
flex-wrap: wrap; 
-webkit-box-pack: center; 
-moz-box-pack: center; 
-ms-flex-pack: center; 
-webkit-justify-content: center; 
justify-content: center; 
-webkit-flex-align: center; 
-ms-flex-align: center; 
-webkit-align-items: center; 
align-items:center; 
border: 2px solid; 
padding: 5px; 
margin: 0; 
} 

.content { 
float: left; 
width: 150px; 
height: 150px; 
background: green; 
border: 2px solid; 
padding: 0; 
margin: 0; 
} 

.content2 { 
float: left; 
width: 150px; 
height: 150px; 
background: blue; 
border: 2px solid; 
padding: 0; 
margin: 0; 
} 

HTML:

<div class="container"> 
<div class="content"> 
<p>Content</p> 
</div> 
<div class="content2"> 
<p>Content2</p> 
</div> 
</div> 

Answer 1

vi state perdendo alcune proprietà dal vecchio 2009 PROGETTO (o sono loro, di nome sbagliato). Il vostro contenitore CSS dovrebbe essere simile a questo:

http://cssdeck.com/labs/ci9imeed

.container { 
    width: 510px; 
    height: 310px; 
    background: red; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -moz-box-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
    border: 2px solid; 
    padding: 5px; 
    margin: 0; 
} 

Si noti, tuttavia, che nessuno dei browser con un'implementazione 2009 Flexbox (Android, più vecchio Safari, più vecchio Firefox) il supporto di avvolgimento.