Apply styling for iphone - ios

Question

I am having a issue with the styling for the iphone.
I have this form where it displays list of doctors base on a list of doctors from the db and it it generates the results correctly.
However, when the results are generated, you need to swipe from right to left to see the info.
How can I target only Iphone users so the information is within the frame of the iphone?
Here is the following form I used. Ignore the "##", I am using coldfusion and bootstrap.
$(function(){
$('##myModal').modal('show');
});
<div class="widthResults">
<nav class="hidden-xs visible-md visible-lg" ng-show="ShowResults"><uib-pagination boundary-links="true" max-size="maxPageNumbersToShow" ng-model="currentPage" total-items="resultsCount"> </uib-pagination></nav>
<nav class="visible-xs hidden-md hidden-lg" ng-show="ShowResults"><uib-pager ng-model="currentPage" total-items="resultsCount"> </uib-pager></nav>
<div class="container">
<div id="searchResults" ng-repeat="e in providers" ng-show="ShowResults">
<div class="row">
<hr />
<h4>{{e.FullName}}</h4>
</div>
<div class="row">
<div class="col-md-4 no-margin padding"><strong>Specialty: </strong>{{e.Specialty}}<br />
<span class="padding"><strong>Gender:</strong> {{e.Gender}}</span><br />
<strong>Language(s):</strong> {{e.Languages}}</div>
<div class="col-md-4 no-margin"><strong>Clinic: </strong> <i class="glyphicon glyphicon-map-marker"></i> {{e.Address1}}<br />
<span class="shiftAdd padding">{{e.Address2}} </span><br />
<strong>Phone:</strong> <i class="glyphicon glyphicon-earphone"></i> {{e.Phone | PhoneNumber}}</div>
</div>
</div>
</div>
<nav class="visible-xs hidden-md hidden-lg" ng-show="ShowResults">
<hr /><uib-pager ng-model="currentPage" total-items="resultsCount"> </uib-pager></nav>
</div>