Un des problèmes récurrents dans une application Cordova utilisant AngularJs est de mettre une image de fond sur l’ensemble de l’écran peut importe le téléphone utilisé.
Vous me direz qu’il suffit de mettre une balise “background” et de définir l’url de l’image.
et bien essayez, mais ça ne donnera surement pas ce que vous souhaitez !
Je vous propose ici d’insérer une image et de la redimensionner automatiquement en fonction de la taille de l’écran à l’aide d’une directive AngularJs.
La méthode simple :
Une méthode utilisant seulement du css existe. Je vous la donne ci-dessous.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Le problème de cette méthode est qu’elle n’est pas compatible avec tous les navigateurs :
- Safari 3+
- Chrome (tous)
- IE 9+
- Opera 10+
- Firefox 3.6+
Utiliser une directive AngularJs :
Il existe plusieurs autres méthodes CSS pour faire cette manipulation, et également des plugins JQuery.
Ces méthodes sont très bien détaillées sur ce site : http://css-tricks.com/ (en anglais).
Mais dans mon cas, j’ai essayé toutes les méthodes et aucune ne résolvait mon problème (qui était donc un déploiement de mon application Cordova sur un Galaxy S2 avec Android 4.1.2).
J’ai donc été amené à utiliser cette fameuse directive dont je parles depuis tout à l’heure.
J’espère que vous savez créer des directives Angular, parce que vous allez en avoir besoin.
J’ai donc intégré la mienne dans le fichier “directives.js” et je vous la présente ci-dessous :
angular.module('monApp.directives', []).
directive('resize', function ($window) {
return function (scope, element) {
var w = angular.element($window);
scope.getWindowDimensions = function () {
return { 'h': w.height(), 'w': w.width() };
};
scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
scope.windowHeight = newValue.h;
scope.windowWidth = newValue.w;
scope.style = function () {
return {
'height': (newValue.h) + 'px',
'width': (newValue.w) + 'px',
'background-size' : (newValue.w) + 'px ' + (newValue.h) + 'px'
};
};
}, true);
w.bind('resize', function () {
scope.$apply();
});
};
});
A première vue rien de bien compliqué. Et c’est le cas.
La directive “resize” récupère la taille de la fenêtre (avec ‘w.height()’ et ‘w.width()’) et set les attributs css suivants :
- height
- width
- background-size
Sur l’élément de votre page voulu.
Mais alors comment je choisi mon élément de page voulu justement?
Et bien comme ceci :
<html ng-app="monApp"> <head> </head> <body ng-style="style()" resize> <!-- CONTENT --> </body> </html>
Il suffit donc d’ajouter les attributs suivants sur la balise de votre choix (pour moi je l’ai mis sur body) :
- ng-style=”style()”
- resize
Et dans votre css :
body {
background: url('/images/bg.jpg') no-repeat center center fixed;
}
La directive va ainsi calculer la taille de l’écran du téléphone et définir la taille de l’image de fond pour qu’elle prenne tout l’écran.
Notes complémentaires :
– Cette méthode donne la taille de l’écran à l’image de fond. Ce qui veut dire que l’image va être étirée pour prendre tout l’écran. Il se peut donc qu’en fonction des définitions d’écran l’image soit déformée. Attention à votre image !
– Il se peut que même avec cette méthode l’image s’affiche mal sur certains téléphones (exemple : on ne voit que le haut de l’image étirée sur tout l’écran). Si c’est le cas et que vous êtes sous android, je vous conseille d’utiliser Crosswalk comme webview en remplacement de la webview standard. Pour installer crosswalk rendez vous sur cet article.