Wie kann ich erzwingen, dass iOS-Geräte meinem CSS folgen?

Question

Ich versuche, iPhones dazu zu bringen, den normalen CSS-Einstellungen zu folgen. Chrome zeigt es gut an und zeigt es an, wie es auf "mobiler Ansicht" sollte, aber wenn ich es auf meinem iPhone ansehe, zeigt es ziemlich anders an

Bitte sehen Sie die Screenshots unten.

Bild oben: Chrome in "Mobile Ansicht".

Bottom Image: Iphone6s

Vergleichen Sie den Dropdown-Pfeil auf der rechten Seite auf dem Boden Bild im Vergleich zu Anfang ein

Was ist der beste Weg, dies zu lösen sein wird?

<div class="row SortPanel"> 
       <div class="col-sm-12 innerSortPanel"> 
        <asp:Panel ID="pnlSort" runat="server" CssClass="innerSortPanel"> 
         <asp:DropDownList ID="ddlOrderBy" runat="server" OnSelectedIndexChanged="ddlOrderBy_SelectedIndexChanged" AutoPostBack="true" CssClass="form-control input-sm"> 
          <asp:ListItem Value="0" Text="Date: sooner - later" /> 
          <asp:ListItem Value="20" Text="Date: later - sooner" /> 
          <asp:ListItem Value="5" Text="Price: low - high" /> 
          <asp:ListItem Value="25" Text="Price: high - low" /> 
          <asp:ListItem Value="10" Text="Duration: shorter - longer" /> 
          <asp:ListItem Value="30" Text="Duration: longer - shorter" /> 
          <asp:ListItem Value="15" Text="Title: A - Z" /> 
          <asp:ListItem Value="35" Text="Title: Z - A" /> 
         </asp:DropDownList> 
        </asp:Panel> 
       </div> 
      </div> 

CSS:

.form-control { 
    display: block; 
    width: 100%; 
    height: 52px; 
    padding: 8px 12px; 
    font-size: 16px; 
    line-height: 1.42857143; 
    color: #555; 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #000; 
    border-radius: 0px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
} 
@media (min-width: 768px){ 
    .sortPanel { 
     padding-right:20px; 
    } 
    .innerSortPanel { 
     float:right; 
    } 
} 

Answer 1

Versuchen einschließlich normalize.css.

Wie von der Website zitiert:

Normalize.css ist eine anpassbare CSS-Datei, den Browser zeigt alle Elemente konsequenten und in Einklang mit modernen Standards macht. Wir untersuchten die Unterschiede zwischen Standard-Browser-Stilen, um genau auf die Stile zu zielen, die normalisiert werden müssen.

Dann können Sie Ihr eigenes CSS ohne jedes Problem verwenden.