Há pouco tempo, fiz um projeto H5 e precisava fazer algum processamento quando a tela horizontal e vertical mudar. Não há dúvida de que o OrientationChange precisa ser usado para monitorar alterações nas telas horizontais e verticais.
Plano 1:
// Ouça as mudanças de orientaçãoWindow.adDeventListener ("OrientationChange", function (event) {// julgando telas horizontais e verticais com base em event.orientation | screen.orientation.ange é igual a 0 | 180, 90 | -90 graus}, false);Depois que o código é adicionado, existem vários problemas de compatibilidade. Problemas de compatibilidade ocorrem aqui em dois lugares:
OrientationChange
Event.orientation | screen.orientation.angning
A seguir, a compatibilidade do evento OrientationChange:
A seguir, é apresentada a compatibilidade da Screen.orientation:
Plano 2:O plano acima não funciona, então você pode fazer apenas outros métodos. Google e aprenda que pode ser alcançado através do RECESSIDE (Window.inner/OuterWidth, Window.inner/OuterHeight):
window.addeventListener ("redimensionar", function (event) {var orientation = (window.innerwidth> window.innerHeight)? "paisagem": "retrato"; if (oritentation === 'retrato') {// faz algo…} mais {// faz outra coisa…}, falsa);Esta solução atende basicamente às necessidades da maioria dos projetos, mas ainda existem algumas deficiências:
Enquanto o tamanho da janela mudar, o evento de redimensionamento será acionado continuamente. Você pode usar o setTimeout para otimizar
Se houver vários lugares que precisarem monitorar telas horizontais e verticais, você precisará registrar vários Windows.addeventListener ("REDIMENTAR", FUNCT (Event) {...}). Você pode melhorá -lo através dos modos de assinatura e publicação? Registre apenas um redimensionamento para monitorar as alterações nas telas horizontais e verticais e publicar notificações no objeto inscrito, desde que ocorram alterações horizontais e verticais. Outros lugares que precisam monitorar telas horizontais e verticais são apenas uma assinatura.
O código -chave é o seguinte:
var resizecb = function () {if (win.innerwidth> win.innerHeight) {// inicialize o julgamento meta.init = 'paisagem'; meta.current = 'paisagem'; } else {meta.init = 'retrato'; meta.current = 'retrato'; } return function () {if (win.innerwidth> win.innerHeight) {if (meta.current! == 'paisagem') {meta.current = 'paisagem'; Event.Trigger ('__ OrientationChange__', Meta); }} else {if (meta.current! == 'retrato') {meta.current = 'retrato'; Event.Trigger ('__ OrientationChange__', Meta); }}}}}}} ();O código completo é clicado aqui
Plano 3:
No entanto, eu pessoalmente acho que a implementação de Window.innerwidth> window.innerHeight é um tipo de detecção de pseudo, que não é um pouco confiável. A detecção pode ser alcançada através de um navegador? Isso é baseado na consulta de mídia CSS3@Media.
Como segue @media compatibilidade:
Conforme mostrado na figura acima, os navegadores móveis suportam mídia CSS3.
Ideias de implementação:
Crie um estilo CSS específico que identifique o status da tela horizontal e vertical
Injete o código CSS em páginas via JS
A função de retorno de chamada de redimensionamento recebe o status da tela horizontal e vertical
Aqui, seleciono a família de nó de <html> </html> como o atributo estilo de detecção. As razões são as seguintes:
Selecione <html> </html> principalmente para evitar refluxo e repintar
O estilo da família de fontes ocorre principalmente porque a família tem as seguintes características:
Dessa forma, podemos especificar um logotipo específico para identificar o status da tela horizontal e vertical, mas o logotipo especificado precisa ser colocado na frente de outras fontes, para que as alterações da fonte HMTL não sejam causadas.
O código -chave é o seguinte:
// retorno de chamada var resizecb = function () {var hstyle = win.getComputedStyle (html, null), ffstr = hstyle ['font-family'], pstr = "retrato)," ffstr, lstr = "paisagem" + ffstr, // spling css css css css css, .orientação {Font-Family: ' + pstr +';}} @media (Orientação: paisagem) {.orientation {Font-Family: ' + lstr +';}} '; // Carregar cargas de estilo de carga (CSSSTR); // Adicionar classe html.className = 'Orientation' + html.className; if (hstyle ['font-family'] === Pstr) {// Inicialize o julgamento meta.init = 'retrato'; meta.current = 'retrato'; } else {meta.init = 'paisagem'; meta.current = 'paisagem'; } retornar function () {if (hstyle ['font-family'] === Pstr) {if (meta.current! == 'retrato') {meta.current = 'retrato'; Event.Trigger ('__ OrientationChange__', Meta); }} else {if (meta.current! == 'paisagem') {meta.current = 'paisagem'; Event.Trigger ('__ OrientationChange__', Meta); }}}}}} ();O código completo é clicado aqui
Resultados do teste
Efeito de retrato:
Efeito da paisagem:
Plano 4:
Você pode melhorá -lo. Ao suportar o OrientationChange , use o OrientationChange nativo. Caso contrário, use a solução 3.
O código -chave é o seguinte:
// Se o evento OrientationChange é suportado isorientação = ('Orientação' na janela && 'OnorientationChange' na janela); // chamado orientação de orientaçãoCB = function (e) {if (win.orientation ==== 180 || win.orientation === 0) {meta.init = 'retrato'; meta.current = 'retrato'; } if (win.orientation === 90 || win.orientation === -90) {meta.init = 'paisagem'; meta.current = 'paisagem'; } retornar function () {if (win.orientation === 180 || win.orientation === 0) {meta.current = 'retrato'; } if (win.orientation === 90 || win.orientation === -90) {meta.current = 'paisagem'; } event.Trigger (EventType, meta); }}; var retorno de chamada = isorientação? OrientationCb (): (function () {resizecBb (); retorna function () {Timer && win.cleartimeout (timer); timer = win.setTimeout (Resizecb, 300);}}}) (); // ouça, Win.adDeventListener (isorientation? EventType: 'O código completo é clicado aqui
Plano 5:
Atualmente, as soluções acima são implementadas por meio de modos personalizados de assinatura e publicação de eventos. Aqui, o OrientationChange pode ser simulado com base no mecanismo de eventos do navegador. Isto é, conserte a incompatibilidade do OrientationChange.
O código -chave é o seguinte:
var eventType = 'OrientationChange'; // aciona a orientação nativaChangeVar Fire = function () {var e; if (document.createevent) {e = document.createevent ('htmlevents'); E.Initevent (EventType, True, False); win.dispatchEvent (e); } else {e = document.createEventObject (); E.EventType = EventType; if (win [eventType]) {win [eventType] (); } else if (win ['on' + EventType]) {win ['on' + EventType] (); } else {win.fireevent (EventType, e); }}}O código completo é clicado aqui
Através das cinco soluções acima, tenho um entendimento adicional da detecção de tela horizontal e vertical nos terminais móveis. Só sei por que escrevo sobre algumas coisas depois de experimentá -las. Também gravei os motivos do artigo, esperando que eles sejam úteis para todos. Depois que cinco soluções evoluíram para a orientação final, o endereço do GitHub: https://github.com/zhansingsong/orientationchange-fix
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.