Хобрук: Ваш путь к мастерству в программировании

Адаптивный дизайн на iPhone 6?

У меня проблемы с адаптивным дизайном на моем iPhone 6. На рабочем столе css работает, медиа-запрос кажется правильным, но когда я помещаю его на сервер и фактически тестирую на своем телефоне, как будто ничего не произошло.

Я уже использовал метатег, и это помогло ему перейти в макет телефона, но текст, img и кнопка не на месте.

Мой CSS:

@media only screen and (max-width: 308px) and (orientation: portrait) {
  .jumbotron h2 {
    bottom: 3em;
  }
  .jumbotron img {
    bottom: -5em;
  }
  .jumbotron button {
    bottom: -1em;
  }
}

  • В разделе head вы присвоили код viewport ?? попробуй @media screen and (max-width: 308px) and (orientation: portrait) 18.07.2017
  • да, я сделал ‹meta name=viewport content=width=device-width, initial-scale=1› 18.07.2017
  • попробуйте @media screen and (max-width: 308px) and (orientation: portrait) удалить only. 18.07.2017

Ответы:


1
max-width: 308px 

очень маленький

вы можете следить за размером бутстрапа на телефонах Телефоны (‹768px), поэтому вам следует изменить на

max-width:768px;
18.07.2017
  • Согласно хрому, это 375 вместо этого. 768 размером с iPad. 18.07.2017
  • в любом случае, ‹768 для мобильной версии, включая Ipad 18.07.2017
  • Новые материалы

    Введение в контекст React
    В этом посте мы поговорим о Context API, который был представлен в React 16, и о том, как вы можете их использовать. Что такое контекст? Глядя на определение из react docs , оно..

    Шлюз с лицензией OSS, совместимый с Apollo Federation v2, появится в WunderGraph
    Сегодня мы рады сообщить, что мы сотрудничаем с поддерживаемой YC Tailor Technologies, Inc. для внедрения Apollo Federation v2. Реализация будет лицензирована MIT (Engine) и Apache 2.0..

    Это оно
    Ну, я официально уволился с работы! На этой неделе я буду лихорадочно выполнять последние требования Думающего , чтобы я мог сосредоточиться на поиске работы. Что именно это значит?..

    7 полезных библиотек JavaScript, которые вы должны использовать в своем следующем проекте
    Усильте свою разработку JavaScript Есть поговорка «Не нужно изобретать велосипед». Библиотеки — лучший тому пример. Это поможет вам написать сложные и трудоемкие функции простым способом...

    Базовое руководство по переносу концепций обучения в глубокое обучение
    Обзор По мере того, как машинное обучение становится все более мощным и продвинутым, модели, обеспечивающие эту расширенную возможность, становятся все больше и начинают требовать огромного..

    C в C.R.U.D с использованием React-Redux
    Если вы использовали React, возможно, вы знакомы с головной болью, связанной с обратным потоком данных. Передача состояния реквизитам от родительских компонентов к дочерним компонентам может..

    5 обязательных элементов современного инструмента конвейера данных
    В цифровом мире предприятия используют конвейеры данных для перемещения, преобразования и хранения огромных объемов данных. Эти конвейеры составляют основу бизнес-аналитики и играют..