#reactjs #css #media-queries
#reactjs #css #медиа-запросы
Вопрос:
Когда я просматриваю свое приложение React на мобильном устройстве, справа всегда остается дополнительное пространство:
https://dsousadev.github.io/23imgs/
Я не вижу этого дополнительного пространства, когда использую инструменты разработчика для имитации мобильного представления, но когда я просматриваю сайт в различных мобильных браузерах, пространство есть, и приложение не подходит автоматически.
Вот текущий CSS в моем медиа-запросе:
@media all and (max-width: 414px) {
.ImageCard,
#CardImage {
width: 314px;
}
#CardImage {
height: 314px;
}
ul {
font-size: 1.2rem;
padding: 0 15px;
}
}
Комментарии:
1. Мобильное устройство, на котором вы тестировали свое приложение, вероятно, имеет ширину экрана от 415 до 614 пикселей (исходная ширина вашего
.ImageCard), и ваши медиа-запросы просто плохо работают с этим конкретным мобильным устройством. Это означает, что над ним нужно еще поработать.
Ответ №1:
Элемент <input accept="image/*" name type="file"> вызывает проблему.
Если я применяю display: none к .fileContainer input , пробел исчезает.
Редактировать
Хорошо, итак, изучая проблему немного подробнее, похоже, что semantic.min.css применяется font-size: 100% к button, input, optgroup, select, textarea . Это приводит к увеличению размера вашего ввода (вот ввод, когда visible ):
Если мы отключим font-size: 100% , входные данные будут отображаться правильно:
После чего ваши оригинальные стили работают:
Так что display: none или возврат font-size будет работать 🙂
Комментарии:
1. Большое спасибо, могу ли я узнать, какие шаги вы предприняли, чтобы разобраться в этом, чтобы я не был вечным новичком, лол
2. Конечно! Я тестирую с помощью Safari Developer Tools Simulator (через XCode, хотя физический iPhone будет работать). Как вы, наверное, знаете, обычно довольно легко определить, в чем проблема, как только у вас открыты инструменты разработки (когда вы выбираете элементы …) Ваша конкретная проблема, хотя …. на самом деле ничего не выделялось! Я закончил «грубую» отладку, удаляя элементы один за другим, пока пробел не исчез, лол. На самом деле я все еще изучаю, ПОЧЕМУ ввод вызывает пробел, просто из собственного любопытства!