Html iPhone上的模式弹出窗体太大

我在同一页上有两个模态形式

一个是另一个的完全复制品。第一个是

appointmentModal

，第二个是

rentalModal

它们都能在桌面上完美工作，但只有一个能在iPhone上工作。

RentalModel

打开太大或放大，无法滚动

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

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

×
租金

你能制作一个JSFIDLE来演示这个问题吗？试着从租赁模式中删除“modal sm”-也许这会阻止模式自动调整到视口大小。第一个模态没有那种类型，也不起作用——这是我能看到的两个模态之间唯一的尺寸差异——谢谢，“模态sm”不是问题所在。我昨天在试图解决这个问题时添加了这一点，但忘了删除它。我不知道如何做JSFIDLE，但这是指向页面的链接，单击“BOOK a LESSON”和“RENTALS”链接可以访问modals。两者都可以在桌面上使用，只有“预订课程”在单击“租赁”后才能在iPhone上使用单击“租赁申请表”按钮查看问题（仅iOS问题）谢谢！