Как DZSlides масштабирует содержимое видового экрана?

Question

Мне нравится, как DZSlides использует размеры пикселей и масштабирует их до размера области просмотра, так как он обеспечивает хорошую предсказуемость для презентаций (хотя я бы не хотел использовать его на обычном веб-сайте).

Однако, я не могу показаться, чтобы выяснить, как масштабирование работает точно так же - мои собственные попытки воссоздать the code есть некоторые раздражающие причуды, либо не занимая всю высоту или экспонирование странных вертикальных смещений:

http://jsfiddle.net/vYA8L/

Я был бы благодарен за краткое объяснение того, что мой пример отсутствует, и как работает DZSlides.

Answer 1

DZSlides устанавливает body быть 800x600 and centered in window (комментарии, добавленные мной):

body { 
    width: 800px; height: 600px; 
    margin-left: -400px; margin-top: -300px; /* these two lines center */ 
    position: absolute; top: 50%; left: 50%; /* body in the window  */ 
    ... 
} 

и каждый слайд, чтобы иметь width: 100% and height: 100%, то есть слайды наследуют их ширину и высоту от body.

Код JavaScript действительно масштабирует body, чтобы соответствовать окну, и, таким образом, каждый слайд масштабируется, чтобы соответствовать.

Ваш jsFiddle с этими стилями будет масштабироваться правильно.

Если вы хотите масштабировать слайдовые элементы вместо body, вы можете применить те же стили/расчеты к слайдам (demo).