Wie kann Media Query überschreibung

[liebewinter]

Hallo , ich versuche seit eine Woche ein Media Query zu bauen... , ich versuche mit den Emulatoren die auf dieser Seite gibt es ...

ich habe alle 6 Media Querys schrieben als Samsung Galaxy der ich Später möchte machen... alle Parameter funzioniert gute als Nokia Lumia 920 der überschreibt mein (orientation : portrait) vom Apple iPad Mini …

das probleme macht der Media Query (orientation : portrait) von Nokia , ich habe diese Media in andere positionen gelegt (Oben vom Media Apple iPad Mini) , aber dem Problem bleibt...

Das probleme in konkret habe auf Hover von Media Apple iPad Mini der wird von Haver vom Nokia ...

Der Code von Nokia (orientation : portrait)

@media only screen and (max-width : 768px) and (orientation : portrait) {
      
    body {   
       display: -ms-grid;
       display: grid;
       grid-row-gap: 5px; 
       background-color: #ebf5d7;
       grid-template-columns: 20% 70% 10%;
       grid-template-areas:

          "header   header    header"
          "nav      nav          nav"
          "linkBox  main     main"
          "footer   footer   footer";
         
       -ms-grid-columns: 9% 75% 16%;
       -ms-grid-row:  120px 80px 103px 200px 110px 90px; 
       -ms-grid-gap: 5px;      
    } 
    
    body > header {
      background-image: url("Bilder/view.png");
      background-repeat: no-repeat;
      padding: 55px;
      margin-bottom: 1px; 
    }
    
    #navs a{font-size: 11px; padding: 0px 6px;}
    #externalLinks ul {
       margin-left: -12px;
    }
    #externalLinks a	{
        font-size: 10px;
        
    }        
    #name {font-size: 0.55em;}
    #email {font-size: 0.55em;}
    #text {font-size: 0.3em;}
    
      /* HOVER  */
    
    .dropdown:hover .dropdown-content {

      left: 42px;
      top: 170px; 
    }  
}

Das Probleme bekomme wenn schreibt display: -ms-grid; , aber das soll machen weil Nokia mit Windows als Betriebe systen läuft...

Der(orientation : portrait) vom Apple iPad Mini Code;

@media only screen and (max-width: 64em) and (orientation: portrait)  {
  
 
 body {
    display: grid;
    background-color: #ebf5d7;
    grid-template-columns: 11% 76% 13%;
    grid-template-rows: auto auto 70vh auto;
    grid-row-gap: 5px;
    grid-template-areas:
      "header  header  header"
      "nav     nav     nav"
      "linkBox main    infoBox"
      "footer  footer  footer";
    }
   body > main {
     height: 70vh;
    }
    #name {font-size: 0.55em;}
    #email {font-size: 0.55em;}
    #text {font-size: 0.8em;}
    #comment {font-size: 0.5em;}
    #externalLinks a{text-align: left;}
    #externalLinks ul {margin: 2px;}
                  
    #navs a{
        font-size: 15px;
    }
    #externalLinks ul {
       margin-left: -10px;
    }
    #externalLinks a	{
        font-size: 13px;
    }
    .dropdown:hover .dropdown-content {

     left: 82px;
      top: 205px; 
    }       
                       
}

Kann Bitte jemand hilfe mir um diesen Problem zu lösen , Danke !