mappa immagine non funzionante su dispositivi iOS, con immagini di grandi dimensioni che vengono ridimensionate dal dispositivo

Sto sviluppando un’applicazione web interna sulla nostra intranet aziendale utilizzando PHP. Una sezione dell’app visualizza un paio di immagini ad alta risoluzione per l’utente. Queste immagini sono nella regione di 5000×3500 pixel. Ogni immagine ha una mappa immagine (usando aree rettangolari), e tutto funziona bene nei browser desktop che ho provato.

Il problema che sto riscontrando è che quando gli utenti accedono al sito tramite i loro dispositivi iOS, le immagini vengono ridimensionate da Safari sul dispositivo, tuttavia le coordinate della mappa immagine non vengono regolate per corrispondere.

Un esempio di HTML generato dal mio PHP è il seguente:

      

(Le coordinate rettangolari effettive nella mappa immagine sono calcolate come percentuale delle dimensioni dell’immagine).

So che il safari sta ridimensionando l’immagine a causa dei vincoli di memoria sul dispositivo, ma ho bisogno di trovare un modo per ridimensionare la mappa immagine per adattarla o sostituire la mappa immagine con qualcos’altro che farà lo stesso lavoro. Qualcuno può offrire qualche consiglio?

Questo argomento è stato risolto qui su stackoverflow: jquery-image-map-alternative

L’idea migliore è usare ancore posizionate in modo assoluto (anche come suggerito da steveax) invece di imagemap.

Aggiornare

Poiché si tratta di una vecchia domanda, potresti prendere in considerazione l’utilizzo di mappe SVG al giorno d’oggi. Sono supportati in tutti i browser moderni, funzionano in modo reattivo e sono facili da usare come mappe di immagini. (grazie all’utente vladkras per il promemoria)

Perché non usi invece Mappe di immagini reattive. In questo modo puoi ancora usare poly maps per oggetti dalla forma strana.

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

È facile come aggiungere lo script. E una riga di javascript:

 $('img[usemap]').rwdImageMaps(); 

Il commento di Nathan è corretto. È necessario correggere la vista per evitare il ridimensionamento. Fondamentalmente, o specificare una larghezza fissa di pixel, o impostare la scala su 1.0 e impostare user-scalable = no

Vedi questo documento per riferimento:

http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Un’alternativa all’utilizzo del tag area è di usare javascript con eventi x / y e limiti per le aree di successo.

Recentemente mi sono imbattuto in questa limitazione su un progetto in cui dovevamo essere in grado di eseguire lo zoom e questo è ciò che ho fatto per risolverlo:

  • Dividi l’immagine in 4 quadranti

  • Collocato le 4 immagini in div con width e height impostate al 50% e position: absolute;

  • Elementi posizionati in modo assoluto all’interno dell’elemento padre del quadrante utilizzando valori percentuali e un alto z-index

Come questo:

CSS

 #map-frame { position: relative; } .map { display: block; position: absolute; width: 5%; height: 3%; z-index: 99; } .q { position: absolute; width: 50%; height: 50%; } .q img { display: block; max-width: 100%; } .q1 { top: 0; left: 0; } .q2 { top: 0; right: 0; } .q3 { bottom: 0; left: 0; } .q4 { bottom: 0; right: 0; } 

HTML

  

Metti tutto il contenuto DENTRO UNA TABELLA. Imposta la larghezza al 100%. L’iphone non sembra scalare le tabelle … Ero alle prese con questo problema perché avevo perso le mie immagini, o all’interno di un div. nessuno dei collegamenti di rect coords funzionava. Ma quando metto l’intero lotto all’interno di un tavolo … Beh, provalo e guarda 🙂

Scavo questo post perché ho appena trovato una soluzione per far funzionare la mappa immagine su iOS.

Metti la tua mappa all’interno di un’ancora e ascolta clic / tocca gli eventi su di essa, per verificare se l’elemento di destinazione corrisponde all’area di una mappa.

HTML

         

JAVASCRIPT

 $("#areas").on("click tap", function (evt) { evt.preventDefault(); if (evt.target.tagName.toLowerCase() == "area") { console.log("Shape " + evt.target.id.replace("area", "") + " clicked!"); } }); 

Testato su iPad4 con mobile safari 6.0

Non utilizzare Default e

cambiarlo. Come e

. Sta funzionando !!!

Appare semplicemente un # nell’attributo usemap per risolvere il problema su iPhone.

Ad esempio e

La mia soluzione è stata facile. Ho appena assegnato un’altezza e una larghezza al css del DIV per adattarlo alla dimensione dell’immagine e tutto ha funzionato bene. La dimensione originale dell’immagine era 825 x 1068, quindi

  
...

Spero che sia d’aiuto.

       

per favore prova a usare valori percentuali all’interno delle coordinate