How to make the Bootstrap Modal dialog respond to a real iPhone if it already works on an emulated iPhone in Google Chrome?

Question

I tried to make Bootstrap Modal box and make it responsive, and also read this question: Bootstrap Modal Dialog. Can a grid be used within a modal context?

However, the page worked well in Google Chrome and worked well in Google Chrome, simulating the iPhone 5, 6 or 6 Plus (note: as modeled in the developer tool), but does not work on a real iPhone 6 Plus or iPad (in portrait mode). (the text seems really huge).

Is there any way to make it work?

The code:

<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 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 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 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> 

sample page: http://skiesof.blue/try/

PS I study this question further. With my iPhone 6 Plus, which has iOS 9.3.1, it works well, but on an iPad with iOS 9.0 or 9.1 it has this when the modal appears:

Answer 1

This seems to be an iOS9 issue, and it is not related to modal content. I don't have an iPhone 6+, but I have the same problem on an iPad. Adding the following CSS made it work for me:

 body { padding-right: 0px !important } .modal-open { overflow-y: auto; } 

fooobar.com/questions/156875 / ...

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

Answer 2

According to the loading example, there is no need to add container col-md-12 after modal-body , just add your html after 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>