iPhone上的模态弹出窗口太大

Question

我在同一页面上有两个模态表格。

一个是另一个的精确克隆。第一个是appointmentModal，第二个是rentalModal。

它们都可以在桌面上完美运行，但只有一部适用于iPhone。 rentalModal打开太大或放大，无法滚动。

我该如何解决这个问题？两个标题都可以在下面看到。

<!-- Appointment Modal Start -->
<div class="modal fade" id="appointmentModal" tabindex="-1" role="dialog" aria-labelledby="appointmentModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="#" method="post" id="appointment-form" name="appointment-form">
                <input type="hidden" name="action" value="send_appointment_form"/>

                <!-- Modal header start -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="appointmentModalLabel">Book A Lesson</h4>
                </div>
                <!-- Modal header end -->

第二种模式：

<!-- RENTAL Modal Start -->
<div class="modal fade" id="rentalModal" tabindex="-1" role="dialog" aria-labelledby="rentalModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <form action="#" method="post" id="rental-form" name="rental-form">
                <input name="action" value="send_rental_form" type="hidden">

                <!-- RENTAL header start -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="rentalModalLabel">Rentals</h4>
                </div>
                <!-- RENTAL header end -->