html - div 在移动 View 上无法正确显示

Question

我有一个 div，我在单击按钮后显示它。此 div 与其他 div 重叠，我将其显示为弹出窗口。虽然它在桌面浏览器上看起来不错，但当我选择设备模式为 iPhone 6 时看起来不太好。

<div class="row" id="divPopUp" runat="server" style="height: 50px; background-color: red;  text-align: center; margin-bottom: 10px; font-size: 30px; color: white; position: fixed; width: 35%; margin-top: 45px; margin-left: 40px;padding-top: 5px">Thanks for help</div>
<div class="row" id="staticdiv">
    Some text and image
</div>

名为 divPopUp 的 div 我正试图放在名为 staticdiv 的 div 之上。它在桌面浏览器上看起来不错，但在设置为 iPhone 的设备模式下查看时看起来非常困惑。我正在使用 Bootstrap 。我该怎么做才能解决这个问题，让它在 iPhone 上看起来也不错。

Answer 1

做这样的事情:

上一个 HTML:

<div class="row" id="divPopUp" runat="server" style="height: 50px; background-color: red;  text-align: center; margin-bottom: 10px; font-size: 30px; color: white; position: fixed; width: 35%; margin-top: 45px; margin-left: 40px;padding-top: 5px">Thanks for help</div>

更新

.popup-block {
    height: 50px;
    background-color: #F00;
    text-align: center;
    font-size: 30px;
    color: #FFF;
    position: fixed;
    width: 35%;
    margin: 0 auto;
    padding: 0;
    left: 0;
    right: 0;
    line-height: 50px;
}


 @media only screen and (max-width: 767px) {
       
       .popup-block { width: 94%; /* Or whatever floats your boat*/ }

 }

  <div class="row popup-block" id="divPopUp" runat="server">Thanks for help</div>

希望这样做能解决您的问题。