Я столкнулся со странной проблемой на работе. После долгих усилий я наконец решил ее. Здесь я записываю идеи и решения анализа.
Проект заключается в создании адаптивного официального веб-сайта компании. После того, как страница со статическим изображением была вырезана на ранней стадии, она была отправлена на серверную часть для использования в качестве шаблона, и я практически покинул проект.
Когда бэкенд был реализован, я обнаружил, что отображение страницы на мобильном терминале было не совсем правильным и выглядело очень размытым. Первая мысль была, что накрылась глава мета. Проверив исходники, я обнаружил, что она накрылась.
Это мета-заголовок, который я привык использовать для адаптивного изменения ширины страницы в соответствии с шириной устройства.
<meta name=viewport content=width=ширина устройства, начальный масштаб=1, минимальный масштаб=1,0, максимальный масштаб=1,0, масштабируемый пользователем=нет />
Однако структура внутренней реализации вводится непосредственно в соответствии с шаблоном, а некоторые публичные ресурсы даже включают мета для настройки области просмотра. Бэкэнд представлен следующим образом:
<meta name=viewport id=viewport content=width=640px, масштабируемый пользователем=no>
К этому заголовку добавляется файл js, который необходимо добавить, и в нем четко указано, что файл js не может быть изменен! Таким образом, эта настройка фиксированной ширины в 640 пикселей перезаписывает мою исходную мета-настройку, которая меняется в зависимости от ширины устройства!
Возникает проблема: статическая страница была завершена, и из-за исторических факторов кода значительная часть кода вначале не использовала rem-единицы, и больше невозможно изменить эффект CSS в больших масштабах. Только сбросив ширину области просмотра через js, ее можно переопределить заново... Это довольно просто, но код довольно некрасивый.
Но возникает другая проблема. На этой официальной странице веб-сайта также динамически представлены страницы iframe. Эти страницы iframe имеют фиксированную ширину 640 пикселей. Это так разрушительно! Если я добавлю мета, которая меняется в зависимости от ширины устройства, то эти iframe нельзя будет просмотреть, если я не добавлю мета снова, то сам официальный сайт нельзя будет просмотреть!
К счастью, эти iframe вводятся с помощью унифицированного метода. Хотя js-файл метода внедрения не может быть изменен, его все равно можно снова отслеживать в бизнес-коде. Итак, после повторной привязки события клика и определения того, был ли введен iframe, пришло время использовать некоторые специальные методы!
В CSS3 есть метод transform: scale() , который может масштабировать элементы. Хотя фактическая ширина и высота занимаемого пространства не изменились, эффект отображения по-прежнему хорош.
Соответствующий коэффициент масштабирования можно получить, вычислив 缩放比例= 设备宽度/ 640 , а затем установив transform: scale(缩放比例) на введенном iframe, чтобы добиться красивого масштабирования!
Это конец дела? Нет! еще нет! iframe масштабируется, но высота также масштабируется, а содержимое отображается не полностью. Установка height: 设备高度/ 缩放比例может восстановить исходную высоту iframe.
Думали, все закончилось? Не совсем! Есть еще проблемы! После того, как слой iframe масштабируется с помощью атрибута scale() , он также по умолчанию перемещается на определенное расстояние вниз и вправо. Это связано с тем, что scale() по умолчанию масштабируется по центру! Здесь было потрачено много времени на поиск подходящих решений, таких как отрицательная маржа, трансляция() и т. д. Однако из-за сложности расчета соответствующего коэффициента скользящей пропорции я прошу прощения за свой плохой алгоритм, для которого я попробовал этот метод. долго и наконец решил сдаться.... ..
Просматривая руководство по CSS, я нашел знакомый, но незнакомый атрибут.
Установите положение базовой точки повернутого элемента:
Transform-origin: ось X, ось Y, ось Z;
Он имеет три значения атрибута, которые соответственно обозначают расположение определенного представления по осям X, Y и Z.
Встреча со старым другом в чужой стране, встреча со старым другом после долгой засухи! Чего я хочу, так это тебя! Установить transform-origin: 0 top 0 Решение ~
На самом деле этот атрибут использовался уже давно, но сначала я написал аббревиатуру transform-origin: 0 , а после анализа браузером это было transform-origin: 0 center 0 ... Что я чувствовал при время Вот и все. Я думал о том, чтобы переместить iframe вверх, но не знал, что у других есть такая функция, но проигнорировал ее. Я пока не могу учиться в спешке, могу потратить полдня на один атрибут, я наверное не квалифицированный фронтендист... (побег.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.