Good afternoon, I decided to take myself a mac with a retina, a question is brewing, I have a mockup on Windows that I need to take into account when I will do the layout? Well, that is, will it be necessary to take into account the size of the screen, maybe there is some meta tag so that the layout itself reduces pixels by 2 times depending on the screen, in general, how much does the layout work on a regular monitor and on the retina?

    1 answer 1

    Some methods of adapting graphics for screens with high pixel density:

    1. Method 1. Using SVG

      .selector {background: url (../ path_to_png / apple.png) no-repeat; } html.svg .selector {background-image: url (../ path_to_svg / apple.svg); }

    Perfect for logos, icons, as well as any vector graphics.

    1. Method 2. CSS Media Query and background-size property

      .selector {background: url (../ path_to_png / apple.png) no-repeat; } @media (-webkit-min-device-pixel-ratio: 2) {.selector {background-image: url (../ path_to_png/apple@2x.png); background-size: cover; }}

    Using the “min-device-pixel-ratio” selector, devices with a pixel density of 2 and higher are determined, the picture is connected twice as large for them, and the background-size: cover property tells the browser that the existing picture needs to be scaled to block keeping proportions.

    1. Method 3. Replacing src in pictures

      jQuery (document). ready (function () {if ('devicePixelRatio' in window && window.devicePixelRatio == 2) {var img_to_replace = jQuery ('img.replace-2x') .get ();

      for (var i=0,l=img_to_replace.length; i<l; i++) { var src = img_to_replace[i].src; src = src.replace(/\.(png|jpg|gif)+$/i, '@2x.$1'); img_to_replace[i].src = src; };

      }});

    In the HTML code, we prescribe the required class, width or height to the tag so that the enlarged picture does not spoil the design.

     <img src="../path_to_png/apple.png" width="200" height="200" class="replace-2x" />

    This method uses the window.devicePixelRatio property to define a screen with increased density, finds all the images that need to be adapted and replaces their src with a similar one, but with the addition of “@ 2x”.

    1. Method 4. Cookies and non-server solution

      (function () {if (document.cookie.indexOf ('device_pixel_ratio') == -1 && 'devicePixelRatio' in window && window.devicePixelRatio == 2) {

       document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';'; window.location.reload();

      }}) ();

    Using JavaScript, this method allows you to set a cookie once and reload the page. Further, on the basis of this cookie, the server may decide to immediately issue an adapted picture for screens with increased density.

    Retina Retina

    Not retina Not retina