Как запретить масштабирование
Добрый день!
Столкнулся с такой проблемой: Написал приложение на css3, html5 и javascript для тач-экрана под windows 7. Мешает масштабирование с помощью тач жестов. Пробовал отменить в IE10, Firefox, Chrome, Opera. Ничего у меня не получается, они все равно реагируют на жест двумя пальцами уменьшение или увеличение страницы. Искал события для того чтобы отловить эти жесты, но они то же не ловятся. Может кто что подскажет начинающему. Спасибо. С уважением, Анатолий. |
сомневаюсь что можно отловить жесты.
Зато можно отловить изменение размера страницы через resize
window.onresize = function(){
//При изменениии масштаба/размера окна браузера
var width = document.documentElement.clientWidth; //Ширина экрана
var height = document.documentElement.clientHeight; //Высота экрана
alert(width);
}
1) можно было бы попробывать изменить масштаб браузера обратно, но я хз как это сделать, если и возможно то точно не везде. resizeTo метод вроде есть, впрочем помоему это нето. 2) с другой стороны можно попробывать изменить размер самого html через scale. http://d3pr5r64n04s3o.cloudfront.net...ml/index8.html 3) есть такая штука window.devicePixelRatio но чо с ней делать на десктопе я хз :) <script> // у меня эта сволочь всегда единицу возвращает (проба в хром) alert( window.devicePixelRatio); </script> нужно экспеременитровать однако. |
Короче придумал так :)
демо zoom для хром и IE
<body>
123123
</body>
<script>
document.body.style.zoom="500%";
</script>
а значит при масштабировании можно просто пересчитывать zoom для body. (рабочий пример для хром)
<body>
КУКУ
</body>
<script>
var size = [document.documentElement.clientWidth,document.documentElement.clientHeight];
window.onresize = function(){
document.body.style.zoom=document.documentElement.clientWidth/size[0];
}
</script>
в ie ширину надо иначе получать, после допиливания должно и для ie подойти Ну а в браузерах в которых zoom непроканает придётся для body юзать css3 transform:scale. дальше развлекайтесь сами :) |
Спасибо за совет. Но дело в том, что при тач-масштабировании событие resize не появляется. Это я проверил.
|
у меня ноут под windows 7поддерживает мультикасание на тачпаде, когда масштабирую двумя пальцами событие срабатывает, недоумеваю почему на тачскрине этого не происходит(тачскрина под рукой нет проверить сорри ). Мне кажется что браузеру пофиг, с тачпадом работает всё на ура.
ну даже если вообще нечего не придумаешь то на самый последний случай проверяй скажем каждые 100 милисекунд не изменился ли размер экрана в таймере, и если изменился то действуй. |
Цитата:
|
может подскаскажешь как :)
если рассуждать в твоём направлении то есть библиотеки для работы с мультитач. правда все на мобильные платформы, и перспектива их применения на win7 пока мне не ясна. ссылка на подборку может пытаться отменить touchmove для мультикасаний через event.preventDefault(), но я хз проверять неначем. как комбо из двух подходов можно попробывать определение мультитач вместо onresize и масштабировать body как предлагалось в предыдущем посте. |
Спасибо, DjDiablo. Сегодня все попробую и отпишусь.
|
Цитата:
Цитата:
|
Спасибо всем! У меня все получилось. Сегодня протестировал на больших экранах. Кратко:
1. тач-событие onresize срабатывает под IE 10. В safari и opera несрабатывает. 2. на onresize поставил - document.body.style.zoom=document.documentElement. clientHeight/1080; 1080 - высота экрана в пикселях. |
| Часовой пояс GMT +3, время: 12:00. |