Как решить проблему с адаптивным дизайном?

Question

[Расул Гитинов]

Все мои медиа-запросы в CSS написаны в таком виде:

@media only screen and (max-width:ширина экрана в px) {
	.to-top {
		display: none;
	}
}

В браузере выглядит все хорошо на всех размерах.

Но, заходя через телефон, например Nexus 5 (у которого разрешение экрана 1920px на 1080px), я вижу изменения только не ниже 1080px, из всех прописанных мною в CSS.

Это конечно логично. Получается, что мой код считает фактические пиксели каждого экрана (у моего монитора 1920px на 1080px и у Nexus 5 1920px на 1080px), но мне нужно, чтобы на Nexus 5 мой сайт отображался, как для маленького экрана, то есть полноценная мобильная версия.

У меня уже это прописано под все разрешения, просто, наверно надо что-то заменить, чтобы он опирался не на пиксели, а на конкретный размер экрана устройства.

Растолкуйте мне как и что делать.

Answer 1

[nav]

Думаю сейчас вам поможет этот мета-тэг:

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

И немного почитайте про него и его параметры, это займет совсем немного времени и поможет вам в будущем.

Comments

[Расул Гитинов]

Твой ответ оказался правильным, только щас его вставил в свой код как надо! Спасибо!

Answer 2

[sergey]

max-device-width укажите

и почитайте вот это

Answer 3

[Mr Crabbz]

Но, заходя через телефон, например Nexus 5 (у которого разрешение экрана 1920px на 1080px)

Вы забываете учитывать плотность пикселей (в css именуемый как device pixel aspect ratio). У Некcуса вашего он равен 3:



То есть, на вашем девайсе страница рендерится в разрешении 360х567. От сюда возможны ваши проблемы с таргетированием медиа-запросов.

А вот как на седьмой нексус таргетироваться: https://gist.github.com/afj176/6357322

Comments

[Расул Гитинов]

А как именно это указать в моем коде?

[Расул Гитинов]

И единственный ли это вариант? Есть ли еще какие-либо?

[Mr Crabbz]

media screen and (max-width: 360) например

[Расул Гитинов]

У меня уже прописан код под все разрешения, но работает он только в десктопном браузере. На телефоне отображается сайт с разрешением max-width: 1280px.

Answer 4

[Wheelie]

@media (max-width:ширина экрана в px)

а если оставить только так?

Comments

[Расул Гитинов]

Неа, не реагирует