Мобильная вёрстка: макет&viewport, как подружить?

Question

[Kot Matpockuh]

Всем привет. Есть вопрос...

Есть макет (дизайн моб. версии) с шириной в 640px. Верстал я разумеется с мин. шириной всех блоков в 640пикс. Но тут возникли "приколы" с некоторыми моб.девайсами, на которых появляется скролл - т.е. страницу приходится масштабировать.

Пробовал играться с viewport (ставить initial-scale, width и тд), но получается какой-то быдлокод с if-ами)
Наверное я что-то делаю не так.

Как изначально вписывать страницу в масштаб девайса?, даже если его ширина 540пикс?

Comments

[metaf]

пробовали?

[metaf]

<meta name="viewport" content="width=540"> съелся html

Answer 1

[sergski]

Для мобильных версий нельзя делать фиксированную верстку, девайсов слишком много. Используйте в media min-width и/или max-width, например:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

И в css используйте: min-width, max-width, width: auto
Media Queries

Comments

[Kot Matpockuh]

так то оно так, стили от пикс. до пикс
но допустим блок контента: стабильно 600пикс. и как в таком случае быть?

[sergski]

Нет, размеры нужно выставлять относительные, auto, min-width, max-width. В моб верстке фиксированные размеры зло.

Answer 2

[Алекс Глебов]

Верстал я разумеется с мин. шириной всех блоков в 640пикс.

ну и что что макет на 640
для телефонов 320 минимальная ширина экрана берется всегда..

Answer 3

[Александр Алексеев]

ставьте вьюпорт 640px

Comments

[Kot Matpockuh]

в таком случае нужно уменьшать масштаб вручную (т.е. страница изначально чуть больше на малых экранах)