Css не работает на телефоне
в стилях.css, я использую медиа-запросы, оба из которых используют вариант:
сайты изменяют размер до макета, который я хочу в обычном браузере (Safari, Firefox), когда я сжимаю окно, однако мобильный макет вообще не отображается на телефоне. Вместо этого я просто вижу CSS по умолчанию.
может ли кто-нибудь указать мне в правильном направлении?
все три из них были полезными советами, но похоже, мне нужно было добавить мета-тег:
теперь он, похоже, работает как в Android (2.2), так и в iPhone.
Не забудьте иметь стандартные объявления css выше медиа-запрос или запрос также не будет работать.
Я подозреваю, что ключевое слово only может быть проблема здесь. У меня нет проблем с использованием медиа-запросов, таких как:
@media screen and (max-width: 480px)
я использовал bootstrap на пресс-сайте, но он не работал на IE8, я использовал css3-mediaqueries.JS javascript, но все еще не работает. если вы хотите, чтобы ваш медиа-запрос работал с этим файлом javascript, добавьте экран в строку медиа-запроса в css
css Link line так же просто, как и выше.
сегодня у меня была аналогичная ситуация. Медиа-запрос не работает. Через некоторое время я обнаружил, что место после " и " отсутствует. Правильный медиа-запрос должен выглядеть так:
Я использую несколько методов в зависимости от. В той же таблице стилей я использую: @media (max-width: 450px), или для отдельного убедитесь, что у вас есть ссылка в заголовке правильно. Я посмотрел на ваш fixmeup, и у вас есть запутанный массив ссылок на css. Он действует, как вы говорите, также на HTC desire S.
Я скопировал bootstrap 4 media queries прямо из своих документов, и каждый запрос помечен той же разметкой комментариев в стиле javascript // !
кроме того, IntelliJ text editor позволил мне комментировать определенные строки css в меньшем файле, но автоматически использовать // . Это не бесплатная программа, поэтому я предположил, что все правильно. Существует меню предпочтений для исправления этого поведения.
Мультимедийный запрос CSS для небольших устройств не работает для Android, когда экран поворачивается в альбомной ориентации, цвет фона не меняется, а форма переполняется.
Сайт работает хорошо, когда поворот экрана выключен, я не знаю, почему это происходит, поскольку в IOS нет проблем, только в Android.
3 ответа
Это происходит потому, что экран вашего устройства Android имеет высоту более 549 пикселей (с учетом спецификаций ваших медиа-запросов). Естественно, в ландшафтном режиме эта высота становится шириной устройства и, следовательно, ваш медиа-запрос игнорируется.
Это медиа-запрос, который вы можете выбрать практически для всех телефонов
Невозможно выполнить адаптивный дизайн только с одним медиа-запросом. Чтобы сделать адаптивный дизайн правильным, посетите и проверьте этот сайт, где разъясняются медиа-запросы и примеры того, как их использовать.
телефон Android и телефон iOS не обязательно используют одинаковую ширину и высоту, большинство телефонов iOS используют width: 375px и height: 667px (или > и height: 375px в альбомном режиме ), , хотя это только для iPhone 6/7/8, за исключением Plus и других моделей , вы можете проверить ширину / высота, какой телефон использовать в Chrome / Mozzila Firefox / и т. д. в режиме разработчика при эмуляции мобильных устройств.
Задание фиксированной ширины для элементов DOM может испортить представление в небольших устройствах. особенно когда данная ширина недоступна, так как ширина устройства меньше этой ширины.
Поэтому при написании медиазапросов для небольших устройств, например мобильных телефонов, было бы здорово, если бы вы заменили все фиксированные значения ширины на проценты. Чтобы они не переполняли доступное пространство и оставались в пределах ширины устройства.
Если у вас есть проблемы специально для ландшафта, вы можете решить их, используя медиа-запрос и сочетание ориентации.
Выше кода достаточно для написания правил для небольших устройств при использовании в горизонтальной ориентации.
Читайте также: