Минимальная высота для веб-сайта

Мне нравится, когда адресный бар исчезает на моем iphone, когда я посещаю веб-сайт. Это можно сделать с минимальной высотой. Я стараюсь сделать это с помощью css.

Если я использую это, тогда все будет хорошо, за исключением того, что я не считаю это дружественным для других телефонов (значение сейчас немного экстремально..):

body { min-height: 9000px;
}

Если я использую это, то это не сработает.

body { min-height: max-device-height;
}

что это хороший способ справиться с этой проблемой?

2 ответа

я бы использовал этот javascript:

var height = screen.availHeight;
element.style.setAttribute("min-height", height + 'px', false);

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


Вы можете использовать max-device-height, но только в медиа-запросах, например:

@media только экран и (max-device-height: 500px) {min-height: 500px; } }

(больше примеров здесь: http://mislav.uniqpath.com/2010/04/targeted-css/)

Тем не менее, для всех телефонов требуется множество правил.

Я думаю, что лучше попробовать установить html, body {min-height: 100%;}. Это правило попытается сделать минимальную высоту 100% высоты окна. Возможно, адресная строка исчезает, если размер больше обычного окна просмотра. В этом случае вам может понадобиться значение, которое немного больше, например, 101% или, возможно, 110%, что, конечно, менее экстремально, чем 9000 пикселей.

licensed under cc by-sa 3.0 with attribution.