Encontrei um problema estranho no trabalho. Depois de muito lutar, finalmente o resolvi. Aqui registro as ideias e soluções de análise.
O projeto é construir um site oficial da empresa responsivo. Depois que a página de imagem estática foi cortada no estágio inicial, ela foi enviada ao backend para uso como modelo, e basicamente encerrei o projeto.
Quando o back-end foi implementado, descobri que a exibição da página no terminal móvel não estava correta e parecia muito borrada. O primeiro pensamento foi que o cabeçalho do meta estava coberto. Depois de verificar o código-fonte, descobri que estava coberto.
Este é o metacabeçalho que estou acostumado a usar para fazer com que a largura da página mude de forma adaptativa de acordo com a largura do dispositivo.
<meta nome = conteúdo da janela de visualização = largura = largura do dispositivo, escala inicial = 1, escala mínima = 1,0, escala máxima = 1,0, escalonável pelo usuário = não />
No entanto, a estrutura de implementação de back-end é introduzida diretamente de acordo com o modelo, e alguns recursos públicos incluem até mesmo a meta para definir a janela de visualização. O back-end é apresentado assim:
<meta nome=viewport id=viewport content=width=640px, user-scalable=no>
Este cabeçalho é anexado por um arquivo js que deve ser adicionado e é claramente informado que o arquivo js não pode ser modificado! Portanto, essa configuração de largura fixa de 640px substitui minha metaconfiguração original que muda com a largura do dispositivo!
O problema surge, a página estática foi concluída e devido a fatores históricos do código, uma parte considerável do código não utilizava unidades rem no início, e não é mais possível modificar o efeito css em grande escala. Somente redefinindo a largura da janela de visualização por meio de js ela poderá ser substituída novamente... Isso é bastante simples, mas o código é bastante feio.
Mas surge outro problema. Esta página do site oficial também apresenta páginas iframe de forma dinâmica. Essas páginas iframe têm uma largura fixa de 640px. Isso é tão devastador! Se eu adicionar meta que muda com a largura do dispositivo, esses iframes não poderão ser visualizados; se eu não adicionar meta novamente, o próprio site oficial não poderá ser visualizado!
Felizmente, esses iframes são introduzidos por meio de um método unificado. Embora o arquivo js do método de introdução não possa ser alterado, ainda é possível monitorar novamente no código comercial. Então, depois de vincular o evento click novamente e determinar se o iframe foi introduzido, é hora de usar alguns métodos especiais!
CSS3 tem um método transform: scale() que pode dimensionar elementos. Embora a largura e a altura reais do espaço ocupado não tenham mudado, o efeito de exibição ainda é bom.
A taxa de escala correspondente pode ser obtida calculando 缩放比例= 设备宽度/ 640 e, em seguida, definindo transform: scale(缩放比例) no iframe introduzido para obter uma escala bonita!
Será este o fim do assunto? Não! ainda não! O iframe é dimensionado, mas a altura também é dimensionada e o conteúdo é exibido de forma incompleta. Definir height: 设备高度/ 缩放比例pode restaurar a altura original do iframe.
Pensei que tinha acabado? Na verdade! Ainda existem problemas! Depois que a camada iframe é dimensionada pelo atributo scale() , ela também se move uma certa distância para baixo e para a direita por padrão. Isso ocorre porque scale() é dimensionado de acordo com o centro por padrão! Muito tempo foi gasto aqui para encontrar soluções adequadas, como margem negativa, translate(), etc. No entanto, devido à dificuldade em calcular o coeficiente de proporção móvel apropriado, sinto muito pelo meu algoritmo ruim para o qual tentei esse método. muito tempo e finalmente decidi desistir.... ..
Examinando o manual de CSS, encontrei um atributo familiar, mas desconhecido.
Defina a posição do ponto base do elemento girado:
origem da transformação: eixo x eixo y eixo z;
Possui três valores de atributos, que representam respectivamente onde a visualização definida é colocada nos eixos X, Y e Z.
Encontrar um velho amigo em uma terra estrangeira, encontrar um velho amigo depois de uma longa seca! O que eu quero é você! Definir transform-origin: 0 top 0 ~
Na verdade, esse atributo já é usado há muito tempo, mas o que escrevi primeiro foi a abreviatura transform-origin: 0 , e depois de analisado pelo navegador ficou transform-origin: 0 center 0 ... Como me senti em o tempo É isso. Estou pensando em mover o iframe para cima, mas não sabia que outras pessoas tinham essa função, mas ignorei. Ainda não consigo estudar com pressa, posso perder meio dia com um atributo, provavelmente não sou um front-end qualificado... (fuga).
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.