Come rendere la finestra di dialogo modale Bootstrap reattiva su un iPhone reale se funziona già su un iPhone emulato su Google Chrome?

Question

Ho provato a fare il lavoro di dialogo Bootstrap modale e renderlo reattivo, e leggere questa domanda anche: Bootstrap Modal Dialog. Can the grid system be used within a modal context?

Tuttavia, la pagina ha funzionato bene in Google Chrome, e ha funzionato bene in Google Chrome simulato iPhone 5, 6, o 6 Plus (nota: come simulato nello strumento di sviluppo) - ma non funziona su un vero iPhone 6 Plus o iPad (in modalità verticale). (il testo sembra davvero enorme).

C'è un modo per farlo funzionare?

Il codice:

<div class="modal-body"> 
    <div class="container col-md-12"> 
     <div class="row"> 
      <p class="col-md-4"> 
       1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </p> 
      <p class="col-md-4"> 
       2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </p> 
      <p class="col-md-4"> 
       3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
      </p> 
     </div> 
    </div> 
</div> 

pagina di esempio su: http://skiesof.blue/try/

P.S. Sto esaminando ulteriormente questo problema. Con il mio iPhone 6 Plus che ha iOS 9.3.1, sembra funzionare bene, ma su un iPad con iOS 9.0 o 9.1, ha questo quando il modale è spuntato:

Answer 1

sembra che questo è un problema iOS9 e non è correlato al contenuto del modale. Non ho un iPhone 6+ ma ho riscontrato lo stesso problema sul mio iPad. L'aggiunta dei seguenti CSS ha reso il lavoro per me:

body { 
    padding-right: 0px !important 
} 

.modal-open { 
    overflow-y: auto; 
} 

https://stackoverflow.com/a/32720590/1581477

https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181

Answer 2

Secondo bootstrap example non c'è bisogno di aggiungere container col-md-12 dopo modal-body è sufficiente aggiungere il codice HTML dopo modal-body.

<div class="modal-body"> 
    <div class="row"> 
    <div class="col-md-3"> 
     <p>1st col 3</p> 
    </div> 
    <div class="col-md-3"> 
     <p>2nd col 3</p> 
    </div> 
    <div class="col-md-3"> 
     <p>3rd col 3</p> 
    </div> 
    <div class="col-md-3"> 
     <p>4th col 3</p> 
    </div> 
    </div> 
</div>