Создание элемента независимого от масштаба устройства

[mumus]

Здравствуйте. Возможно ли создать элемент (к примеру кнопочку) имеющую размеры, например 10vw по высоте и ширине от размеров девайса и расположенных в определенном месте например справа внизу относительно экрана (вьюпорта) и споизионированного как fixed. Причем при увеличении или уменьшении масштаба страницы, элемент должен оставаться незименных размеров, вроде как 10vw относительно вьпорта и соответственно оставаться именно в правом нижнем углу даже если мы скроллим сайт.

 

[Great Rash]

Не думаю, что это возможно. Просто потому, что JS не позволяет узнать масштаб вьюпорта. Я смог придумать два способа попробовать реализовать вашу задумку:

 

1) Извращенский:

Запихиваем весь контент в некий блок. А кнопку кладём поверх этого блока. При помощи мета-тега запрещаем юзеру масштабировать вьюпорт. При попытке масштабирования вызываем скрипт, который устанавливает transform: scale(N); для всего контента, кроме этой зелёной кнопки.

 

2) ХЗ работающий ли:

Устанавливаем мега-мета-тег (<meta name="viewport" бла-бла-бла>), в котором разрешаем масштабировать, и пробуем получить скриптом ширину window. Если она отличается от изначальной, то поздравляю вас, вам повезло. Значит мы можем посчитать масштаб: делим новую ширину окна на эталонную, получаем масштаб окна, увеличиваем кнопку на этот масштаб, опять же используя трансформ.

 

P.S. Дизайнер ваш - лох, ибо не понимает вообще, что такое веб и пытается из веба сделать мобильное приложение...

[mumus]

Допустим, что это виджет (а-ля callbackhunter) который скриптом ставят практически на любой сайт (адаптивный, неадаптивный). И эта кнопка должна выглядеть именно так, независимо от размеров сайта. На самом деле проблема есть, многие ищут решения, но как такового грамотного решения нет. Где-то читал зарубежную статью,что-то типа "а неплохо было бы сделать что-то типа position:device-fixed". Как раз на эту тему.

[Great Rash]

Хм. ну вот я сейчас в консоли попробовал масштаб поменять и увидел, что screen.availHeight и window.innerHeight отличаются, думаю это можно использовать, чтобы узнать масштаб.