Advertisement
rAthus

Font-size body suivant largeur écran (app responsive)

Apr 14th, 2015
379
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /** Récupération la résolution de l'écran en PPI (pour adapter sur les écrans rétinas par exemple) **/
  2. function getPPI()
  3. {
  4.     var div = document.createElement('div');
  5.     div.style.width = '1in';
  6.     var body = document.getElementsByTagName('body')[0];
  7.     body.appendChild(div);
  8.     var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
  9.     body.removeChild(div);
  10.     return parseFloat(ppi);
  11. }
  12. /** Définition d'un font-size de base pour le body en fonction de la largeur de l'affichage **/
  13. $(document).ready(function()
  14. {
  15.     var r = 0.02; // changez ce ration pour augmenter ou diminuer la font-size de base
  16.     var w = $(document).width();
  17.     var p = getPPI();
  18.     var fontsize = w*r*p/96;
  19.     $('body').css({'font-size':fontsize+'px'});
  20. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement