瀏覽器縮小網頁（Safari瀏覽器除外）

Question

我一直在網頁上處理訂單和交付，我遇到了一個問題，我不知道如何解決。該頁面目前使用jQuery可摺疊列表& flex box顯示，這些顯示在Safari中很好地呈現，但在其他任何瀏覽器中都沒有。身體縮小到似乎是移動視圖，並且無論邊距或尺寸有什麼變化，它都保持移動大小。

我目前使用jquery.mobile-1.4.5.min.js來構造列表，我已經不得不對CSS做一些修改來吸引頁面的佈局，但是我找不到任何會影響頁面大小的東西。我的問題是什麼可能造成這種情況？它在jQuery方面，還是會出現CSS問題？

這是我一直在使用構建一切模板

HTML

<ul id="content-list"> 
      <form name="form1" form method="POST" action="/cgi-bin/formmail"> 
      <ul style="margin:auto;"> 
       <ul class="background"> 
       <div data-role="main" class="ui-content"> 
       <div data-role="collapsible"> 
       <h4>Items</h4> 
       <ul class="flex-container"> 
        <li class="flex-item">product name</li> 
        <li class="flex-item">producer name</li> 
        <li class="flex-item">price</li> 
        <li class="flex-item"><input type="text" placeholder="amt. here" maxlength="15"></li> 
       </ul> 
       </div> 
       <div data-role="collapsible"> 
       <h4>More Items</h4> 
       <div data-role="collapsible"> 
       <h4>Even more items</h4> 
       <ul class="flex-container2"> 
        <li class="flex-item2">longer product name</li> 
        <li class="flex-item2">longer producer name</li> 
        <li class="flex-item2">price<br>price<br>price</li> 
        <li class="flex-item2"> 
        <div class="input"> 
         <input type="text" placeholder="amt. here" maxlength="15"> 
         <input type="text" placeholder="amt. here" maxlength="15"> 
         <input type="text" placeholder="amt. here"maxlength="15"> 
        </div> 
        </li> 
       </ul> 
       </div> 
       </div> 

CSS

@mixin flexbox() { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

@mixin flex($values) { 
    -webkit-box-flex: $values; 
    -moz-box-flex: $values; 
    -webkit-flex: $values; 
    -ms-flex: $values; 
    flex: $values; 
} 

@mixin order($val) { 
    -webkit-box-ordinal-group: $val; 
    -moz-box-ordinal-group: $val;  
    -ms-flex-order: $val;  
    -webkit-order: $val; 
    order: $val; 
} 

.flex-container { 
    padding: 0; 
    margin: 2% 0 4% 0; 
    list-style: none; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    justify-content: space-between; 
} 
ul { 
    display: flex; 
} 
ul:after { 
    border-bottom: 1px solid black; 
} 
.flex-item { 
    background: white; 
    padding: 0; 
    width: 100px; 
    height: 80px; 
    margin-top: 10px; 
    margin: auto; 
    line-height: 25px; 
    color: black; 
    font-weight: normal; 
    font-size: 1em; 
    text-align: center; 
} 
.input{ 
    width: 75px; 
    vertical-align: top; 
} 
.background{ 
    border: none; 
    margin: auto; 
    width:80%; 
    min-width: 80%; 
    padding-right: 1cm; 
    background-color:#009966; 
} 
#content-list { 
    display: flex; 
    width: 100%; 
    min-width: 100%; 
    padding-bottom: 2cm; 
} 


.flex-container2 { 
    padding: 0; 
    margin: 2% 0 4% 0; 
    list-style: none; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    justify-content: space-between; 
} 
.flex-item2 { 
    background: white; 
    padding: 0; 
    width: 130px; 
    height: 120px; 
    margin-top: 10px; 
    margin: auto; 
    line-height: 45px; 
    color: black; 
    font-weight: normal; 
    font-size: 1em; 
    text-align: center; 
    } 

另外，這裏是模板瓦特/我的資源使用： http://jsfiddle.net/TLittler/9ndzm3cc/

Answer 1

我不確定是否磨壞她想要Safari瀏覽器表現得像其他瀏覽器，或者反過來，但這裏是什麼引起的差別（至少對於Safari瀏覽器< 9）：

#content-list { 
    display: flex; 

如果你想其他瀏覽器的行爲類似於Safari瀏覽器，只需設置它到block。 （Fiddle）

如果你想Safari瀏覽器表現得像其他瀏覽器，你需要添加前綴的版本，像其他地方一樣：（Fiddle）

display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex;