Detekce změny orientace na mobilních zařízeních

Pokud vaše mobilní aplikace neumožňuje pouze zobrazení na výšku nebo pouze na šířku, je velká šance, že budete muset pár věcí upravit. I když jste svá rozvržení vytvořili plynule, možná budete muset provést nějaké změny programově. Existuje několik strategií, jak zjistit, kdy se stránky změnily, takže se pojďme podívat, jak můžeme zjistit změny orientace na mobilních zařízeních.

Událost změny orientace

Tato metoda je to, co byste očekávali od mobilního API; jednoduchá událost orientační změny v okně:

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
	// Announce the new orientation number
	alert(screen.orientation);
}, false);

Během těchto změn je window.orientation majetek se může změnit. Hodnota 0 znamená zobrazení na výšku, -90 znamená, že je zařízení otočeno na šířku doprava a 90 znamená, že je zařízení otočeno na šířku doleva.

změnit velikost události

Některá zařízení neposkytují orientationchange událost, ale spusťte událost změny velikosti okna:

// Listen for resize changes
window.addEventListener("resize", function() {
	// Get screen size (inner/outerWidth, inner/outerHeight)
	
}, false);

Trochu méně zřejmé než orientationchange událost, ale funguje velmi dobře.

Velikost obrazovky

Existuje několik vlastností, které můžete načíst z objektu okna, abyste získali velikost obrazovky a to, co považuji za "virtuální" velikost obrazovky:

• outerWidth , outerHeight :skutečné pixelové nemovitosti
• innerWidth , innerHeight :virtuální pixelová nemovitost

Ty vám samozřejmě neposkytnou orientaci, ale pomocí jednoduché matematiky můžete zjistit, zda je okno aktuálně širší nebo vyšší.

Dotazy na média

Orientaci můžeme identifikovat také pomocí dotazů na média CSS:

/* portrait */
@media screen and (orientation:portrait) {
	/* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
	/* landscape-specific styles */
}

Pokud byste chtěli být chytří, můžete pomocí JavaScriptu naprogramovat periodický „sledovač“, který zkontroluje barvu pozadí bloku a spustí vlastní změnu orientace.

matchMedia

Nativní window.matchMedia metoda umožňuje živé dotazy na média. Můžeme použít mediální dotazy výše, abychom zjistili, zda jsme v zobrazení na výšku nebo na šířku:

// Find matches
var mql = window.matchMedia("(orientation: portrait)");

// If there are matches, we're in portrait
if(mql.matches) {  
	// Portrait orientation
} else {  
	// Landscape orientation
}

// Add a media query change listener
mql.addListener(function(m) {
	if(m.matches) {
		// Changed to portrait
	}
	else {
		// Changed to landscape
	}
});

Existuje tedy pro vás několik nápadů a možností. Rád bych slyšel další praktické techniky, které jste použili!