Recentemente, escrevi uma página móvel no trabalho. A princípio não era nada, mas havia um requisito que parecia muito estranho. A página que escrevi precisava ser colocada em um APP, mas o APP estava dentro. orientação paisagem., o webview que abre esta página também está na tela horizontal (a versão mais recente do APP abre no webview na tela vertical), originalmente usamos o layout rem, e não há problema no estado da tela horizontal, mas na Parte A. espera usar a tela horizontal na tela horizontal Forçar esta página a ser exibida verticalmente quando a tela estiver aberta. Portanto, há a seguinte série de operações.
A primeira é determinar o status da tela horizontal, usando o seguinte código:
function orient() { if(window.orientation == 90 || window.orientation == -90) {//tela horizontal//ipad, tela vertical do iphone;/$(body).attr(class, paisagem); //orientação = 'paisagem'; //alert(ipad, tela vertical do iphone; tela horizontal do Andriod $(p).text(tela horizontal); == 0 || window.orientation == 180) {//Tela vertical//tela horizontal do iPad, tela vertical do Android// $(body).attr(class, retrato);// orientação = 'retrato'; //alert(ipad, tela horizontal do iphone; tela vertical do Andriod); $(p).text(tela vertical); return false } } //Chamado quando a página carrega $(function() { orient(); }); //Chamado quando o usuário altera a orientação da tela $(window).on('orientationchange', function(e) { orient(); });Isso está monitorando a direção do celular. Porém, como o APP é aberto horizontalmente, geralmente é impossível detectar isso, e um pré-requisito para isso é que o telefone esteja com a rotação automática ativada. Portanto, o método acima foi abandonado.
Como o método inteligente foi abandonado, o método mais barato é monitorar a largura e a altura da tela. Quando a altura é maior que a largura, o padrão é o estado de tela vertical do telefone. Quando a largura é maior que a altura, consideramos que o telefone está no estado de tela horizontal. (Claro que isso também tem limitações, mas considerando que o novo APP resolveu o problema das telas horizontais e verticais, faremos apenas aqui). Não precisamos fazer nada quando a tela está no modo retrato. Mas no modo paisagem, temos que girar a página 90 graus. Sem mais delongas, vamos examinar diretamente o código:
//Use a rotação CSS3 para girar o contêiner raiz 90 graus no sentido anti-horário para forçar o usuário a exibi-lo verticalmente var detectOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = documento.getElementsByTagName(corpo)[0], $wrapper = document.getElementById(vue), estilo = if(largura <= height) { // Tela horizontal // estilo += largura: + largura + px; // Preste atenção na mudança de largura e altura após a rotação // estilo += altura: + altura + px;;// estilo += -webkit- transformar: girar(0); transformar: girar(0);;// estilo += -webkit-transform-origin: 0 0;;// estilo += transformar-origin: 0 0;; tamanho da fonte: + (largura * 100/1125) + px; var html_doc = document.getElementsByTagName(html)[0]; html_doc.style.cssText = tamanho da fonte: + (largura * 100/1125) + px } else { // Estilo vertical + = largura: + altura + px;; estilo += altura mínima: + largura + px;; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); // Preste atenção ao tratamento do estilo do ponto médio de rotação += -webkit-transform-origin: + height / 2 + px + (height / 2) + px;; estilo += origem da transformação: + altura / 2 + px + (altura / 2) + px;; //estilo += tamanho da fonte: + altura * 100 / 1125 + px;; //$(html).css({tamanho da fonte:(altura * 100/1125),overflow-y:oculto}); style.cssText = tamanho da fonte: + altura * 100/1125 + px; overflow-y:+oculto;+altura:+altura+px;; estilo += overflow-y: oculto;; $wrapper.style.cssText = estilo; ;função add_tab(){ var clone_tab = $(rodapé).clone(); clone_tab.css({transform:rotate(-90deg),transform-origin:top right}) $(body).append(clone_tab.css({position:fixed,right:1.77rem,bottom:4rem,left); :auto,topo:0,largura:11,25rem,altura:1,77rem})}Acredito que esse código não seja difícil para o pessoal de front-end, mas há três pontos que precisam ser observados.
Primeiro ponto:
No início, girei todo o html diretamente por conveniência. Nesse momento, haverá um problema, ou seja, o posicionamento dos elementos posicionados fixos na página não funcionará (o <footer> no código é colocado como um. tab switch. bottom); precisamos mudar isso. Como girar o elemento pai não funcionará nos elementos filhos, não precisamos girar o elemento pai, apenas girar seus elementos irmãos diretamente. Aqui estou girando um elemento chamado #vue, pois todo o restante do conteúdo da minha página está nesta div. Então eu apenas girei o elemento. Então o posicionamento pode ser usado neste momento, mas o estilo está errado, então na minha função add_tab, ajusto o tamanho e o estilo deste elemento para que ele possa ser exibido normalmente no lado direito da tela, ou seja, em retrato modo , na parte inferior da tela.
Segundo ponto:
A segunda coisa a observar é que como uso o layout rem, vou alterar o tamanho da fonte do html, mas tome cuidado neste momento, quando giramos, a largura vira altura e a altura vira largura, então nós. precisa usar altura para calcular o tamanho da fonte do diretório raiz.
O terceiro ponto:
O terceiro ponto é anotado no programa. Precisamos prestar atenção ao centro de rotação. O centro de rotação padrão é o ponto central do elemento selecionado. Agora queremos alterar o ponto central de rotação. Após a rotação, você também precisa overflow-y:hidden do html. Caso contrário, haverá rolagem desnecessária.
Nesse caso, a página inteira é basicamente girada e os elementos posicionados fixos na parte inferior são posicionados novamente com sucesso. Felizmente, a janela pop-up que usamos é a janela pop-up do layui, e então podemos girar a janela pop-up 90 graus.
ps: Por fim, encontrei um problema que não pode ser resolvido quando a página é longa o suficiente, ou seja, quando há uma barra de rolagem, após a janela pop-up sair, se você deslizar a camada de máscara por trás dela, a próxima. as páginas deslizarão para cima. Isso poderia ter sido resolvido originalmente. O artigo acima foi resolvido usando posicionamento fixo, mas por causa da rotação falhou, então não há uma boa maneira. Não há problema no modo retrato.
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.