Results for mobile : 3

1 - Un site qui prend toute la hauteur disponible avec flexbox 
<body>
	<div class="page">
		<header class="site-header"></header>

		<main class="site-content"></main>

		<footer class="site-footer"></footer>
	</div>
</body>
Nous allons donc simplement appliquer display: flex; à body, et spécifier le comportement de ses descendants direct en tant que colonnes. Puis nous diront simplement à .site-content d’utiliser toute la hauteur disponible.

CSS
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}
2 - A Guide To Designing Touch Keyboards 
/* Empêcher l'autocorrection rend le site plus rapide et la saisie plus simple */
<input type="text" autocorrect="off" />

/* mettre le bon type aide à la saisie sur mobile */
/* téléphone*/
<input type="tel" />
/* nombre: on utilise une pattern (regex)*/
<input type="text" pattern="d*" novalidate />
/*email */
<input type="email" />

/* forcer en majuscules ou pas */
<input type="text" autocapitalize="off" />
3 - Un include sélectif Mobile/Desktop en une fonction 
<?php
function Selective_include($desktop_file='',$mobile_file=''){       
        
    $regex='#android|iphone|ipad|Cellphone|blackberry|Windows Phone|symbian|mobile|bada|hiptop|HTC|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo Wii|Nintendo DS|Nitro|Nokia|Opera Mobi|Opera Mini|Palm|PlayStation Portable|PSP|portalmmm|SonyEricsson|UP.Browser|UP.Link|webOS|Windows CE|WinWAP|YahooSeeker/M1A1-R2D2|LGE VX|Maemo|phone#i';
    $z=preg_match($regex,$_SERVER['HTTP_USER_AGENT'],$resultat);         
    if (!$z){include($desktop_file);return 'desktop';}
    else {include($mobile_file);return 'mobile';}
} 
?>

On lui fournit le nom du fichier à include si on est sur un ordi de bureau/portable et celui qui correspond à un support mobile.

Cette astuce permet par exemple de ne charger que la version du menu qui correspond le mieux au support (pc - > menu déroulant à la souris, sur smartphone -> menu type liste déroulante) ... 

Double avantage: on allège la page et on utilise éventuellement des techniques gérées nativement sur les navigateurs mobiles.

Exemple :
<div class="menu"><?php selective_include('menu_deroulant_desktop.php','liste_deroulante_mobile.php');?></div>