iphone（6）でチェックボックスが正しく表示されない

Question

複数のブラウザのデスクトップで正常に表示されますが、Iphone（6）では正しく表示されないWebページがあります。 Iphone（6）では、各チェックボックスが幅内で左揃えになります。オンデスクトップでは、幅の中央に揃えられます。ここでjs fiddle example

HTML

 <form id="reg_form" action="" method="post"> 
       <legend>Personal Data </legend> 
       <h2>Select days you would like to get invitations for</h2> 
        <div id = "error_place"></div> 
        <div> 
         <ul> 
          <li> 
          <label for= "M">M</label> 
          <input type="checkbox" name="M" value="1" id="M" class="days_group form_group"> 
          </li> 
          <li> 
          <label for= "Tu">Tu</label> 
          <input type="checkbox" name="Tu" value="1" id="Tu" class="days_group form_group"> 
          </li> 
          <li> 
          <label for= "W">W</label> 
          <input type="checkbox" name="W" value="1" id="W" class="days_group form_group"> 
          </li> 
         </ul> 
         <ul> 
          <li> 
          <label for= "Th">Th</label> 
          <input type="checkbox" name="Th" value="1" id="Th" class="days_group form_group"> 
          </li> 
          <li> 
          <label for= "F">F</label> 
          <input type="checkbox" name="F" value="1" id="F" class="days_group form_group"> 
          </li> 
          <li> 
          <label for= "Sa">Sa</label> 
          <input type="checkbox" name="Sa" value="1" id="Sa" class="days_group form_group"> 
          </li> 
         </ul> 
         <ul> 
          <li> 
          <label for= "Su">Su</label> 
          <input type="checkbox" name="Su" value="1" id="Su" class="days_group form_group"> 
          </li> 
         </ul> 

         <button id="btnsubmit" type="button">Submit</button> 
         <div id="spacer"></div> 
         <div class="next-back"> 
          <button type="button" class="next light">next</button>        
          <button type="button" class="back">back</button> 
         </div> 
        </div> 
       </fieldset> 
     </form> 

CSS両方のコンテキストでinputセンターのチェックボックスからwidthプロパティを削除

input { 
    display: block; 
    text-align: center; 
    margin: 0 auto; 
    margin-top: 5%; 
    height: 5vw; 
    width: 65%; 
} 



.next, .back { 
    width: 25%; 
    font-weight:bold; 
} 

.next{ 
    float:left; 
    display:block; 
} 
#btnsubmit{ 
    clear: both; 
    margin:0 auto; 
    margin-top: 15%; 
    display:block; 
    width:25%; 
    text-align: center; 
} 
.back { 
    float:right; 
} 

.next-back{ 
    margin:0 auto; 
    width: 65%; 
} 

.light{ 
    color: white; 
    background-color:lightgray; 
} 

#spacer{ 
    height: 5vw;  
    clear:both; 
} 

ul{ 
    list-style-type: none; 
    width: 100%; 
    text-align:center; 
    padding:0; 
} 

li{ 
    display:inline-block; 
    width:30%; 
} 

h2{ 
    text-align:center; 
    margin-bottom:10%; 
} 

Answer 1

へのリンクです。

input { 
    ... 
    w̶i̶d̶t̶h̶:̶ ̶6̶5̶%̶;̶ 
} 

クローム/ Macの

のiOSのSafari