Как сделать мобильную версию сайта?

Question

[Pavel_Proca]

Использую

@media only screen and (max-width: 480px) { нужные стили }

для того, что бы контент сайта выглядел по другому. Когда увеличиваю и уменьшаю окно браузера, всё выглядит нормально. Переходит без проблем, стили применяются. Но если захожу с телефона, сайт отображается как на компьютере. Как сделать, что бы на мобильнике сайт отображался именно так, как я прописал в стилях? Не понимаю, что я делаю не так.

Answer 1

[imdeveloper]

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

Добавить в head

Comments

[HelpSophie]

Изменение масштаба только оставьте пользователю.

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

[imdeveloper]

HelpSophie: я написал более развернутый вариант и все

Answer 2

[iBird Rose]

такое указал?

<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 3

[Сергей]

А какое у вас разрешение на мобильнике? Бывает так, что в мобильниках с высоким разрешением, браузер принимает экран мобилы за настольный монитор.
Если проблема именно в этом, то посмотрите решение вот тут: "Готовим адаптивный сайт к Retina дисплеям"