html - 移动响应不适用于所有移动设备

Question

我是 Bootstrap 的初学者，到处都是一些文本，我该如何设置它我正在尝试制作一些应用程序，它不适用于所有移动设备，它仅适用于 iPhone 6+ 和 nexus 6p我该如何解决？？html

<div class="progress-bar position" data-percent="48" data-duration="1000" data-color="#63676e,#ec9850"><script>$(".progress-bar").loading();</script></div>

<div id="Main">
<h2 class="text-color-header">Room Utilization</h2>
        <h5 class="text-header">9 rooms occupied today</h5>

        <div id="container">

       <div class="block block-1">
         <h1>$ 2,300</h1>
         <h5>Today Revenue</h5>
       </div>
       <div class="block block-2">
         <h1>$ 12,100</h1>
         <h5>Reservation for next 15 days</h5>
       </div>
       <div class="block block-3">
         <h1>$ 41,000</h1>
         <h5>Revenue Todate / Month</h5>
       </div>
       <div class="block block-4">
         <h1>$ 53,100</h1>
         <h5>Expected Revenue for this month</h5>
       </div>

       <!--Menu Part 02-->
       <div id="base">
         <div class="base-block">
           <h4>Payments</h4>
           <h1>$ 2,000</h1>
           <h5>5 check-outs today</h5>
         </div>
         <div class="base-block">
           <h4>Down Payments</h4>
           <h1>$ 300</h1>
           <h5>2 Bokings withdown payments</h5>
         </div>

       </div>
       <!-- End of menu Part-->
     </div>
</div>

CSS

body{webkit-overflow-scrolling: touch;}
.text-color-header { margin-top: 250px;}
/* Progress Bar */

.progress-bar {
  text-align: center;
    height: 150px;
    width: 150px;
margin-left: 100px;
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;

    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}
.progress-bar div {
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
.progress-bar div span {
    position: absolute;
    font-family: Arial;
    font-size: 35px;
    line-height: 175px;
    height: 175px;
    width: 175px;
    left: 12.5px;
    top: 12.5px;
    text-align:center;
    border-radius: 50%;
    background-color:#e0e0e0;
    color: black;

}
.progress-bar .background {
    background-color: #b3cef6;
}
.progress-bar .rotate {
    clip: rect(0 100px 200px 0);
    background-color: #4b86db;
}
.progress-bar .left {
    clip: rect(0 100px 200px 0);
    opacity: 1;
    background-color: #b3cef6;
}
.progress-bar .right {
    clip: rect(0 100px 200px 0);
    transform: rotate(180deg);
    opacity: 0;
    background-color: #4b86db;
}
@keyframes toggle {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/*End of Progress Bar*/

.page {
    margin: 0px auto;
    display: flex;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
.clearfix {
    display: inline-block;
    margin: 0px auto;
}
h5,
.h5 {
    font-size: 13px;
    text-align: center;
}
.block {
    width: 200px;
    height: 100px;
    margin: 1px;
    display: inline-block;
    background: ;
    color: #d4c4b6;
}
.block:hover h1 {
    color: #000000;
}
.block:hover h5 {
    color: #A48973;
}
#base {
  background: #e2e2e2;
    display: inline-block;
    height: 120px;
    margin-left: 0px;
    margin-top: -7px;
    position: relative;
    width: auto;

}
#base:before {
    border-bottom: 35px solid #e2e2e2;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: "";
    height: 0;
    left: 173px;
    position: absolute;
    top: -20px;
    width: 0;
}
h1,
.h1 {
    font-size: 27px;
    text-align: center;
}
h2,
.h2 {
    font-size: 20px;
    text-align: center;
}
h4,
.h4 {
    font-size: 16px;
    text-align: center;
}
.base-block {
    display: inline-block;
    height: 120px;
    width: 200px;
    margin: 1px;
    display: inline-block;
}
.base-block h1,
h4 {
    color: #000000;
}
.base-block h5 {
    color: #A48973;
}
.navbar-default .navbar-brand {
    color: #A48973;
}
.navbar-default .navbar-toggle {
    border: none;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #A48973;
}
.search-bar {
    padding: 7px 15px;
}
/*Start Media query*/

@media (max-width: 768px) {
    .form-control {
        padding: 6px 100px;
    }
}
/*End Of Media query*/

Answer 1

为 div 使用 Bootstrap 网格布局类 col-xs-6，而不是 block-1、block-2。在您的 css 中，以百分比设置宽度和高度，而不是以 px 为单位的数字。另外，尽量不要设置高度，而是设置宽度。在每个 div 中使用 panel 和 panel-body 等类。将全部内容放入

<div class="container-fluid">
//Create three rows
<div class="row">
//create 2 divs with class col-xs-6 
</div>
<div class="row">
//create 2 divs with class col-xs-6 
</div>
<div class="row">
//create 2 divs with class col-xs-6 
</div>
</div>