Как ограничить страницу вьюпортом под iphone/ipad?

Question

[SilentImp]

Проблема:
Нужно что бы страница ограничивалась рабочей областью экрана на iphone.

Несмотря на

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

и

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  }

Все скролится и изначально во вьюпорте не вся, а только часть страницы.



Тесткейс
websaints.net/testcase/menu.html

Answer 1

[Вадим Макеев]

Напиши вместо device-width конкретное число, которое ты хочешь видеть. Тогда не будет скролиться, как здесь: pepelsbey.github.com/shower/en.htm?full#Cover

Comments

[akira]

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

[SilentImp]

Максимальное число не выход. Но оно и не нужно было :)

[Вадим Макеев]

Фиксированное число я предлагал установить для meta:viewport, а не для link:css

Answer 2

[Вадим Макеев]

И раз уж пошла пьянка: а зачем ты стили собираешь (media queries) прямо в шапке документа, если с таким же успехом это можно сделать в CSS?

Comments

[SilentImp]

Потому что внутрь @media я не могу запихнуть @import :(
Есть какой то секретный финт ушами?
Или ты предлагаешь внутренности кадого файла обрамлять в @media внутри import?
Не уверен что так удобнее — у меня структура вида

[Вадим Макеев]

Так зачем плодить файлы — можно всё в одном сделать, внутрь @media положить весь специфический код. Кстати, свойства -o-box-shadow никогда не было ;)

[SilentImp]

Плодить файлы что бы удобно.
Я пришел к удобству структуры, когда у нас 1 css файл отвечает 1 семантически целостному, желательно атомарному, элементу.
В результате, в каждой из этих папок
common.css
в него подключены
reset.css — стиралка
layout.css — лаяуты
common-presentation-list.css — список общих элементов представления. иногда все же удобнее работать именно с представлением
widget-list.css — список смысловых блоков

Как то так.
На дэв-версии работать удобно.
А дальше уже как сшить — вопрос третий.

Answer 3

[SilentImp]

Все разобрался.
Надо было />
Максимальный масштаб указать;

Comments

[SilentImp]

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

Скушало код, извините

[Вадим Макеев]

А ты всё-таки подумай над фиксированным width для viewport, это позволит не делать 100500 версий для каждого устройства — страница будет увеличена силами самого устройства. И никто не помешает тебе потом видоизменять интерфейс на основе размеров устройства.

[SilentImp]

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

Answer 4

[SilentImp]

И, да, у Q&A убогая система комментирования. :(