Отзывчивый дизайн - галактика размерного размера

Question

У меня вопрос. У меня есть div, в этом div есть еще один div с текстом «Benjamin». Размер шрифта - 7vh. когда я проверяю сайт на галактике s4 mini, текст имеет правильное положение и размер. когда я проверяю сайт с галактикой a5, текст находится на неправильной позиции. Я проверяю сайт с помощью IPhone 4 и 5. Это всегда правильно. Только галактика a5 Покажите мне, что случилось. Мы используем ту же версию Chrome.

http://www.benwillgruber.com/stefanseite/test/index.php -> Сайт http://www.benwillgruber.com/stefanseite/test/wrong_galaxy_a5.jpg--> неправильная позиция http://www.benwillgruber.com/stefanseite/test/google_nexus_10_emulator.png -> правый один http://www.benwillgruber.com/stefanseite/test/galaxy_s4_mini.png -> правый один.

CSS:

* { box-sizing: border-box;} 

body { 
    background-color: #3C3C3B; /* Dunkel Grau */ 
    padding: 0px; 
    margin: 0px; 
    overflow: hidden; 
    width: 100vw; 

} 

/* Willkommenseite */ 
#startseite { 
    width: 100vm; 
    height: 100vh; 
    overflow: hidden; 
} 

#spalte1reihe1 { 
    width: 25vw; 
    height: 22vh; 
    float: left; 
    background-color: #ECECEC; /* Grau */ 
} 

#spalte2reihe1 { 
    width: 50vw; 
    height: 22vh; 
    float: left; 
    background-color: #ffffff; 
} 

#spalte3reihe1 { 
    width: 25vw; 
    float: left; 
    height: 22vh; 
    background-color: #ECECEC; /* Grau */ 
} 

/* Willkommenseite Benjamin Willgruber */ 

#spalte1reihe2 { 
    width: 25vw; 
    height: 16vh; 
    float: left; 
    background-color: #2DAB66; /* Grün */ 
} 

#spalte2reihe2 { 
    width: 50vw; 
    height: 16vh; 
    float: left; 
    background-color: #3C3C3B; 
} 

#spalte3reihe2 { 
    width: 25vw; 
    float: left; 
    height: 16vh; 
    background-color: #2DAB66; /* Grün */ 
} 

/* Willkommenseite kombiniert mit */ 

#spalte1reihe3 { 
    width: 25vw; 
    height: 17vh; 
    float: left; 
    background-color: #ECECEC; /* Grau */ 
} 

#spalte2reihe3 { 
    width: 50vw; 
    height: 17vh; 
    float: left; 
    background-color: #ffffff; 
} 

#spalte3reihe3 { 
    width: 25vw; 
    float: left; 
    height: 17vh; 
    background-color: #ECECEC; /* Grau */ 
} 

/* Willkommenseite Gumhalter Stefan */ 

#spalte1reihe4 { 
    width: 25vw; 
    height: 16vh; 
    float: left; 
    background-color: #1E788B; /* Blau */ 
} 

#spalte2reihe4 { 
    width: 50vw; 
    height: 16vh; 
    float: left; 
    background-color: #3C3C3B; 
} 

#spalte3reihe4 { 
    width: 25vw; 
    float: left; 
    height: 16vh; 
    background-color: #1E788B; /* Blau */ 
} 

#spalte1reihe5 { 
    width: 25vw; 
    height: 29vh; 
    float: left; 
    background-color: #ECECEC; /* Grau */ 
} 

#spalte2reihe5 { 
    width: 50vw; 
    height: 29vh; 
    float: left; 
    background-color: #ffffff; 
} 

#spalte3reihe5 { 
    width: 25vw; 
    float: left; 
    height: 29vh; 
    background-color: #ECECEC; /* Grau */ 
} 

#benjaminwillgruber { 
    float: left; 
    width: 50%; 
    height: 16vh; 
    padding-left: 10px; 
    overflow: hidden; 
    border: 1px solid #ff0000; 
} 

#grafikmediendesign { 
    float: left; 
    width: 50%; 
    height: 16vh; 
    text-align: right; 
    padding-right: 10px; 
    overflow: hidden; 
    border: 1px solid #ff0000; 

} 

#benjamin { 
    font-size: 7vh; 
    color: #ffffff; 

} 

#willgruber { 
    font-size: 7vh; 
    color: #ffffff; 

} 

#grafik { 
    font-size: 7vh; 
    color: #ffffff; 
} 

#mediendesign { 
    font-size: 7vh; 
    color: #ffffff; 

} 

/* Auflösung 300 bis 500 */ 
/* Seitliche Balken werden ausgeblendet */ 


@media only screen and (min-width: 0px) and (max-width: 1000px) 
{ 

    #spalte1reihe1 { 
     display: none; 
    } 
    #spalte2reihe1 { 
     width: 100vw; 
    } 
    #spalte3reihe1 { 
     display: none; 
    } 
    #spalte1reihe2 { 
     display: none; 
    } 
    #spalte2reihe2 { 
     width: 100vw; 
    } 
    #spalte3reihe2 { 
     display: none; 
    } 
    #spalte1reihe3 { 
     display: none; 
    } 
    #spalte2reihe3 { 
     width: 100vw; 
    } 
    #spalte3reihe3 { 
     display: none; 
    } 
    #spalte1reihe4 { 
     display: none; 
    } 
    #spalte2reihe4 { 
     width: 100vw; 
    } 
    #spalte3reihe4 { 
     display: none; 
    } 
    #spalte1reihe5 { 
     display: none; 
    } 
    #spalte2reihe5 { 
     width: 100vw; 
    } 
    #spalte3reihe5 { 
     display: none; 
    } 
} 

HTML:

<!DOCTYPE html> 
<html lang = "de"> 
    <head> 
     <title>Test</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta charset = "utf-8"> 
     <link rel = "stylesheet" href = "./css/style.css"> 

     <style type = "text/css"> 
      @font-face { 
       font-family: 'avril'; 
       src: url('./font/arvil_sans-webfont.eot'); 
       src: url('./font/arvil_sans-webfont.eot?#iefix') format('embedded-opentype'), 
        url('./font/arvil_sans-webfont.woff2') format('woff2'), 
        url('./font/arvil_sans-webfont.woff') format('woff'), 
        url('./font/arvil_sans-webfont.ttf') format('truetype'), 
        url('./font/arvil_sans-webfont.svg#arvil_sans-webfont') format('svg'); 
       font-weight: normal; 
       font-style: normal; 

      } 

      @font-face { 
       font-family: 'sensation'; 
       src: url('./font/sansation_regular-webfont.eot'); 
       src: url('./font/sansation_regular-webfont.eot?#iefix') format('embedded-opentype'), 
        url('./font/sansation_regular-webfont.woff2') format('woff2'), 
        url('./font/sansation_regular-webfont.woff') format('woff'), 
        url('./font/sansation_regular-webfont.ttf') format('truetype'), 
        url('./font/sansation_regular-webfont.svg#sansation_regular-webfont') format('svg'); 
       font-weight: normal; 
       font-style: normal; 

      }   
     </style> 

    </head> 
    <body> 
     <div id = 'startseite'> 
      <div id = "reihe1"> 
       <div id = "spalte1reihe1"> 
       </div> 
       <div id = "spalte2reihe1"> 
       </div> 
       <div id = "spalte3reihe1"> 
       </div> 
      </div> 
      <div id = "reihe2"> 
       <div id = "spalte1reihe2"> 
       </div> 
       <div id = "spalte2reihe2"> 
        <div id = 'benjaminwillgruber'> 
         <div id = 'benjamin'> 
          <font style = "font-family: 'avril'">Benjamin</font> 
         </div> 
         <div id = 'willgruber'> 
          <font style = "font-family: 'avril'">Willgruber</font> 
         </div>     
        </div> 
        <div id = 'grafikmediendesign'> 
         <div id = 'grafik'> 
          <font style = "font-family: 'avril'">Grafik</font> 
         </div> 
         <div id = 'mediendesign'> 
          <font style = "font-family: 'avril'">Mediendesign</font> 
         </div> 
        </div> 
       </div> 
       <div id = "spalte3reihe2"> 
       </div> 
     <div id = "reihe3"> 
      <div id = "spalte1reihe3"> 
      </div> 
      <div id = "spalte2reihe3"> 
      </div> 
      <div id = "spalte3reihe3"> 
      </div> 
     </div> 
     <div id = "reihe4"> 
      <div id = "spalte1reihe4"> 
      </div> 
      <div id = "spalte2reihe4"> 
      </div> 
      <div id = "spalte3reihe4"> 
      </div> 
     </div> 
     <div id = "reihe5"> 
      <div id = "spalte1reihe5"> 
      </div> 
      <div id = "spalte2reihe5"> 
      </div> 
      <div id = "spalte3reihe5"> 
      </div> 
     </div> 
      </div> 
     </div> 
    </body> 
</html> 

Answer 1

Потому что я не могу комментировать ... Текст не выравнивая должным образом на стандартной странице (я предполагаю, это означало только для мобильных телефонов?)

Я предполагаю, что размеры экрана отличаются от размеров A5 и s4. Вероятно, вам придется использовать медиа-запросы, чтобы обеспечить правильное отображение текста на основе доступных размеров экрана. Является ли CSS тем, что вы разместили весь код css? .

(Опять же ... Я хотел отправить это в качестве комментария, но у меня нет респ я готов помочь, просто нужно больше информации

Answer 2

Решение моя проблема была.: я забыл установить линейную высоту, теперь он работает для других устройств.