jQuery mobile 1.4 - Size of custom Icon - breakpoints

jQuery mobile 1.4 - Size of custom Icon - breakpoints

Hello,

I managed to insert my own svg-icon with the integrated fallback to the png. What are the right breakpoints for mobile devices or is there a workflow, that jquery mobile manages the automatic resize on it´s own? I did it like this:

CSS
  1. @media only screen and (min-width: 1px) and (max-width: 480px) {



  3. .ui-icon-bars02:after {
  4.   background-image: url("images/icons-svg/bars02.svg");
  5.   /* Make your icon fit */
  6.   background-size: 22px 22px;
    }


  8. /* Fallback */
  9. .ui-nosvg .ui-icon-bars02:after {
  10.   background-image: url("images/icons-png/bars02.png");
  11.   background-size: 22px 22px;
  12. }
  13. }

  15. @media only screen and (min-width: 481px) {

  17. .ui-icon-bars02:after {
  18.  background-image: url("images/icons-svg/bars02.svg");
  19.   /* Make your icon fit */
  20.   background-size: 30px 30px;
  21. }


  23. /* Fallback */
  24. .ui-nosvg .ui-icon-bars02:after {
  25.   background-image: url("images/icons-png/bars02.png");
  26.   background-size: 30px 30px;
  27. }
  28. }

HTML
  1. <div data-role="navbar">
  2.   <ul>
  3.     <li><a href="#page01" data-icon="bars02">page 01</a></li>
  4.   </ul>
  5. </div>

I guess, my solution is not the best one. When I have a look in the jquery.mobile-1.4.0.css I find this code, but I don´t know, how to reuse it for my custom icon.
  1. .ui-alt-icon.ui-icon-bars:after,
    .ui-alt-icon .ui-icon-bars:after {
  2. background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2210px%22%20viewBox%3D%220%200%2014%2010%22%20style%3D%22enable-background%3Anew%200%200%2014%2010%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M1%2C2h12c0.553%2C0%2C1-0.447%2C1-1s-0.447-1-1-1H1C0.447%2C0%2C0%2C0.447%2C0%2C1S0.447%2C2%2C1%2C2z%20M13%2C4H1C0.447%2C4%2C0%2C4.447%2C0%2C5s0.447%2C1%2C1%2C1h12%20c0.553%2C0%2C1-0.447%2C1-1S13.553%2C4%2C13%2C4z%20M13%2C8H1C0.447%2C8%2C0%2C8.447%2C0%2C9s0.447%2C1%2C1%2C1h12c0.553%2C0%2C1-0.447%2C1-1S13.553%2C8%2C13%2C8z%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  3. }

Heeeelp. :-)

Best greetz from Germany Chemnitz
Tolga