Условие: если window.width меньше ширины div (610px), то применить к нему css-свойство zoom. Это условие работает прекрасно на всех дескотопных браузерах, а так же на WP и Android, но абсолютно некорректно ведёт себя на iPhone.
На iPhone либо сразу 100%, если число без "запаса": jsfiddle.net/hcoqfnr3/6/
Либо происходит масштабирование и до 100% увеличить нельзя: jsfiddle.net/hcoqfnr3/7/
(тап/клик по прямоугольнику масштабирует его)
Я выбрал zoom, потому что scale показал себя более топорно и производил масштабирование из центра себя, а zoom от верхнего левого края. Также проводил эксперимент с flexbox, который некорректно вёл себя на Lumia. А мне надо всем трём платформам угодить.
Что делать? Может, стоит замерять не window.width?
Есть более изящное и мультиплатформенное решение?
aarty20: я подгружаю html-код сторонней страницы в div и мне нужно представить её "на смартфоне, как на ПК". Т.е. вписать сначала в размеры экрана, а потом дать пользователю её масштабировать. Вряд ли тут есть решения, кроме масштабирования.
aarty20: не весь сайт, а отдельную страничку. Вот вы открываете jsfiddle на телефоне - он масштабируется. Изменяете масштаб -- он вылезает за вьюпорт. У меня такая же задача, но не для всего контента, а для одного дива, т.к. кроме него будут элементы управления, которые масштабировать не надо.
iDrugov: Как это эффекта не дало? А что конкретно вы сделали? И еще вопрос, а зачем вы используете js для определения размера экрана, ведь в css есть mediaqueries.
Андрей Федоров: вот так получается, что на айфонах масштабирование увеличивает window, а изменение размеров window масштабирует div. Замкнутый круг. Я изменяю теперь ширину , вместе с ним масштабируется и вложенный div.
Измеряю на js, потому что все алгоритмы на js. Я же не буду на css делать подобные решения.
iDrugov: Значит что-то делаете не так. Проверьте этот пример - codepen.io/aliencash/pen/apzqbK должно работать как надо. Если только я правильно понял, что вы хотите...
Андрей Федоров: нет, я делаю нормально. Дело в том, что это фрагмент кода из iframe-приложения. Если я делаю подобное масштабирование на своём сайте, то айфон нормально масштабирует, но этот же код в приложении не масштабирует.
Андрей Федоров: не в этом дело. Свою задачу я решил так: jsfiddle.net/hcoqfnr3/8/
Просматривая jsfiddle с iPhone - код работает нормально.
Помещаю этот же самый код на html-страницу своего сайта - с айфона работает нормально.
Помещаю этот же код в iframe-приложение - масштабирования не происходит.
Как я уже писал выше, это происходит от того, что родительский элемент, например, 360px и масштабируемый div только на iPhone, только в моём приложении не может выйти за его пределы. Потому я теперь увеличиваю родительский элемент до 610px, а вместе с ним у меня и div масштабируется.
В общем, дело было не в zoom, а конкретно в поведении iPhone в конкретном iframe-приложении.
