- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Маркетинг для шоколадной фабрики. На 34% выше средний чек
Через устранение узких мест
Оксана Мамчуева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Добрый день, есть такая задачка, нужно сделать всплывающий 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
Актуализирую....