Попап блок на всю ширину девайса

M
На сайте с 21.12.2012
Offline
23
685

Добрый день, есть такая задачка, нужно сделать всплывающий popup блок с неким текстом и изображением и этот блок должен показываться на всю высоту и ширину экрана мобильного устройства в масштабе 100% и независимо от зума девайса этот блок должен выглядеть одного размера это сделано чтобы не делать 100 различных версий стилей для разных разрешений.

Принцип следующий, этот блок 100% в ширину и высоту и изначально скрыт, при клике на кнопку он появляется, так как это должно работать на мобильных устройствах применяется и соответствующие стили с медиа запросом:

<meta name="viewport" content="width=device-width, initial-scale=1">

При клике на кнопку, появляется этот блок и динамически изменяется тег вьюпорта

<meta name="viewport" content="initial-scale=1, maximum-scale=1.0, minimum-scale=1, user-scalable=0">

Ставится масштаб страницы 1.0 и убираем возможность пальцами менять зум.

Практически везде работает, кроме Ipohne.

Вот алгоритм проблемы:

1. Юзер зашел на сайт с телефона и видит это

2. При клике на кнопочку, он должен видеть тот самый попап, на всю ширину и высоту экрана, при этом с нужным машстабом шрифта и т.д.

Везде работает, на андроидах, на планшетах многих, в гугл хроме в режиме разработчика если выбран айфон!

На самом айфоне все хуже:

Предположим юзер зашел на сайт и пальцами изменил зум страницы:

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

Может кто сталкивался с этим?

В сети есть несколько решений которые высчитывают масштаб и позицию относительно осям смещения страницы, чтобы независимо от зума страницы, блок выглядел одним и тем же:

http://mystrd.at/projects/rescaler/

А также есть небольшая статейка, предлагающая ввести некое новое свойство css - position: device-fixed или viewport-fixed:

http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

Данные решения работают кривовато. Решение с изменением вьюпорта я сам придумал, но наверняка в интернете такие есть, но на айфончиках работает кривовато. Нужна помощь, к тому же, может кому-нибудь пригодится.

Вот страничка для тестирования (либо в гугл хроме в режиме эмуляции мобильного устройства) либо на айфоне: http://tunerus.ru/test/test.html

http://tunerus.ru (http://tunerus.ru)
M
На сайте с 21.12.2012
Offline
23
#1

Актуализирую....

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий