Aujourd’hui avec le principe de design responsive et les « medias queries », il est assez simple de concevoir un site adaptable à tous les écrans. Néanmoins un des problèmes majeurs auquel nous sommes confrontés est la « position:fixed », qui n’est pas prise en compte par les navigateurs mobiles. Comment faire avec l’iphone, l’ipod et ipad pour que la « position:fixed; » sois prise en compte ? Jusqu’à présent, nous n’avions pas trop le choix, du moins pour que ça fonctionne partout.
• Sois on utilise le trés bon script de Matteo Spinelli : Iscroll4 -> http://cubiq.org/iscroll mais qui force un type de structure particulier et qui charge un JS de plus.
• Sois on charge un jquery et on ajoute un petit morceau de code qui identifie le navigateur et qui permet de mettre une valeur CSS différente.
//stick the footer at the bottom of the page if we're on an iPad/iPhone due to viewport/page bugs in mobile webkit
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
{
$("#footer").css("position", "static");
};
Mais depuis la version IOS5, la « position fixed » semble être prise en charge. Le problème (car il y en a toujours) c’est que seul safari 5.1 semble prendre en compte ce changement. Si vous utilisez Opéra mini par exemple vous n’aurez pas le résultat escompté. En attendant que tout sois harmonisé c’est plutôt une bonne nouvelle.
http://mobile.tutsplus.com/tutorials/mobile-web-apps/ios-5-fixed-positioning-and-content-scrolling/