I use the maphilight.js script ( http://davidlynch.org/projects/maphilight/docs/ ) to select areas on a custom room map.
When changing the screen resolution for proportional display of areas, I apply the following code:

$(window).on('resize', function() { $('.map').maphilight({strokeColor: '424d5c'}); });

The map picture is reduced according to the css. Areas should also decrease. It works on the desktop, there is no on the iPad.
Who uses this library, tell me where to dig? So far, I have come up with the idea of ​​updating the page, when updating everything is clear, with the usual change of portrait-landscape - no .

UPD.
At the request of a colleague, I will add a question - when the orientation changes on the iPad, the resize event is triggered (checked by changing the color of the block), i.e. ** maipilight function is not reinitialized on AIPAD **. At the same time, on the desktop, when the window size is changed, the maphilight function is reinitialized!

    1 answer 1

    Perhaps, you have not set the viewport meta tag, which is why the width of $(window) does not change when you turn the iPad screen. In the <head> block there should be the following line:

     <meta name="viewport" content="width=device-width, initial-scale=1">
    • one
      that ne !!)) what are you laughing at? then probably everything would be crooked ... - Sergey V.
    • Not at all, nothing would be crooked, but the script just would not work when changing the orientation;) - Vitaly Emelyantsev
    • Let's try to isolate the problem, and I will improve the answer. You do not have either the 'resize' event or the maphilight re-initialization on the ipad. Insert into the script before initializing maphilight something that changes the visible area on the page. For example, changing the color of the block to random. And check on the iPad if the color changes or not. If it does not change, then the problem is in the failure of the resize event. And we will go in this direction. - Vitaly Emelyantsev
    • one
      maphilight on ipad does not work. and tried instead of $ (window) .on ('resize', function () {function window.addEventListener ("orientationchange", function () {- exactly the same - the color of the block changes, maphilight - no - Sergey V.
    • The picture remains wider than the screen, and in both directions - from a narrow portrait to a wide landscape and back - the picture is always a little wider - Sergey V.