Так как же пользоваться viewport'ом?

Question

[openerr]

Всем привет, мучаюсь целый день:

При задавании всем привычного meta content="width=device-width, initial-scale=1" name="viewport" происходит ситуация на первой картинке: все секции помимо хедера обрезаются и выглядят ужасно.

Нагуглил решение, где вместо "device-width" прописывается 762px, но в таком случае при заходе с телефона все увеличено в два раза (что фиксится уменьшением двумя пальцами, но всё же) и шрифты/иконки/фотографии кажутся маленькими.

Что делать?

Comments

[deftrue]

сверстать нормально страницу, с медиа запросом под телефон.

[Ankhena]

При задавании всем привычного meta content="width=device-width, initial-scale=1" name="viewport" происходит ситуация на первой картинке: все секции помимо хедера обрезаются и выглядят ужасно.

Ага, судя из второй части, минимальная ширина 762px (откуда взялось это прекрасное число...), а вьюпорт вертикально повернутого телефона ~300-400 точек. Вывод: не влезло.

Нагуглил решение, где вместо "device-width" прописывается 762px, но в таком случае при заходе с телефона все увеличено в два раза (что фиксится уменьшением двумя пальцами, но всё же) и шрифты/иконки/фотографии кажутся маленькими.

Пытаемся масштабировать 762 в ~300-400. Вывод: оно уменьшилось и ничерта не видно.

Решение: пользоваться относительными единицами измерения и/или @media условиями и делать нормальный адаптивный сайт.

Answer 1

[Артём Лукичев]

Здесь только один вариант: сделать сайт адаптивным через @media.

Comments

[openerr]

Да, уже приступил, но можно ли как-то при помощи CSS изначально "уменьшить двумя пальцами" всю страницу за пользователя?

[Сергей delphinpro]

openerr, чтобы "изначально" всё было ровно, делайте так, чтобы элементы не выходили за границы вьюпорта. Плюс initial-scale=1

[Артём Лукичев]

Никак, или я не знаю.