Comment puis-je forcer les appareils iOS à suivre mon CSS

Question

J'essaie d'obtenir que les iPhones suivent le CSS normal que j'ai défini. Chrome l'affiche correctement et l'affiche comme il se doit sur la "vue mobile" mais quand je l'affiche sur mon iPhone, il affiche plutôt différemment

S'il vous plaît voir les captures d'écran ci-dessous.

Image du haut: Chrome dans "Vue mobile".

Bottom Image: Iphone6s

Comparer la flèche du menu déroulant à droite sur l'image en bas par rapport à la partie supérieure d'un

Quelle sera la meilleure façon de résoudre ce problème?

<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

Essayez d'inclure normalize.css.

cité du site:

Normalize.css est un fichier CSS personnalisable qui rend les navigateurs rendent tous les éléments de manière plus cohérente et conforme aux normes modernes. Nous avons étudié les différences entre les styles de navigateur par défaut afin de cibler précisément les styles qui ont besoin de normalisation.

Ensuite, vous pouvez utiliser votre propre CSS sans aucun problème.