Вопрос с медиа-запросом

Question

У меня есть самая странная проблема со средствами массовой информации. В моем браузере для рабочего стола они отлично работают при изменении размера. Когда я тестирую свой iPhone (5C), медиа-запросы полностью игнорируются.

EDIT Если изменить максимальную ширину на что-то абсурдное, как 3000px, стили получить применяется только хорошо ..

в средствах массовой информации запросов Последние элементы в моей таблице стилей, к вашему сведению. Вот конкретный блок медиа-запросов:

@media only screen and (max-width:930px){ 
html{ font-size:46.875%; } 
.arrowdown, .arrowup{ border-width:20px;} 
#about .abouttext{ 
    width:90%; 
    font-size: 1.8rem; 
    line-height:2.7rem; 
    padding-bottom:40px; 
} 
#quotebox{background-color:green;} 
#quotebox h3{ width:65%; } 
#quotebox div{ width:40%;} 
#contact ul li{ 
    font-size:1.6rem; 
    width:90%; 
} 
.socialbox img{ opacity:1; } 
.socialbox a{ margin: 0 20px;} 

.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after { 
    visibility: hidden; 
    opacity:0; 
} 
.hint:after, [data-hint]:after { 
    content: "-"; 
    width:0; 
    height:0; 
} 

} 

У кого-нибудь есть идеи?

Answer 1

Попробуйте добавить: макс-устройство ширина к мультимедийному запросу вместе с этим следующим фрагментом кода в голова вашего HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no"> 

Так что ваши медиа-запросы должны выглядеть следующим образом:

@media only screen and (max-width: 930px), only screen and (max-device-width: 930px){ 
    html{ font-size:46.875%; } 
    .arrowdown, .arrowup{ border-width:20px;} 
    #about .abouttext { 
      width:90%; 
      font-size: 1.8rem; 
      line-height:2.7rem; 
      padding-bottom:40px; 
      } 
}