Как я могу обнаружить изменения в уровне масштабирования? - PullRequest
Новая
       27

Как я могу обнаружить изменения в уровне масштабирования?

3 голосов
/ 29 сентября 2011

Откройте эту страницу в Chrome или Safari и измените уровень масштабирования.Вы заметите милый эффект замедления на его элементах при изменении уровня масштабирования.

Очевидно, это работает только в Chrome и Safari (webkit?), Но как это сделать?И есть ли кросс-браузерный способ сделать это?

Ответы [ 2 ]

4 голосов
/ 30 сентября 2011

Я понял это. JavaScript не задействован, это чистый CSS.

А именно, свойство webkit -webkit-transition: 

/* css */
.box {
   background: #5599ff; text-align: center;
   line-height: 80px; height: 80px; width: 100px;
   font-family: arial, helvetica; color: #FFF; 
   -webkit-border-radius:3px; margin: 10px }

.trans {
    -webkit-transition:all .218s; }

<!-- html -->
<div class="box"> STIFF </div>
<div class="box trans"> FLUID </div>

EDIT : После дальнейших исследований я обнаружил, что большинство браузеров (т. Е. Все, кроме IE) поддерживают специфичное для поставщика свойство transition CSS. Тем не менее, при изменении размера страницы только браузеры webkit используют переходы.

См. Демонстрацию по jsfiddle

0 голосов
/ 29 сентября 2011

Я не думаю, что есть какой-либо (кросс-браузерный) прямой способ прослушивания события масштабирования страницы. Есть некоторые бэкдоры, описанные в событии Catch браузера "увеличить" в JavaScript . однако я думаю, что вы можете слушать Ctrl + + / - ИЛИ Ctrl + Mouse Wheel Событие.

...