2013-08-17 4 views
8

voglio togliere il href di un'immagine quando uno telefoni cellulari ..Rimuovere l'ancora quando si è in mobilità?

<header id='top_header'> 
    <a href='index.php'><img id='crest' src='../images/868crest.png' alt='868 RCACS Crest'></a> 
    <img id='title' src='../images/newtitle.png' alt='868 RCACS Title'> 
</header> 

Io attualmente non hanno alcuna Javascript del o jquery così come posso fare questo se i cant fare questo con il solo HTML e CSS

risposta

12

È possibile utilizzare le query con @mediahandheld parola chiave e pointer-event proprietà come

@media only screen and (max-device-width: 480px) { 
    a { 
     pointer-events: none; 
    } 
} 

Demo (ridimensionare lo schermo e posiziona il mouse sopra il link)

Demo 2 (Niente di speciale, appena cambiato il colore, in modo da poter testare meglio)

Demo 3 (Usando handheld non computer di destinazione)

Nota: ho rimosso handheld da quella demo per farlo funzionare a partire da ora.

+0

Questo, purtroppo, non sarà catturare tutti i telefoni sul mercato ormai compreso l'iPhone 5, che ha '(max-device-width: 1136px) 'http://stackoverflow.com/questions/12539697/iphone-5-css-media-query – DGS

+2

@DGS questo non è il pezzo di codice che coprirà tutti i dispositivi, ho solo gli ha dato un'idea, lui può fare il massimo di esso, è necessario scrivere le media query per indirizzare cose specifiche, quindi se si tratta di iPhone, ci si può semplicemente mettere la stessa 'a {puntatore-eventi: nessuno; } 'Dentro quella media query –

+0

Volevo solo per assicurarsi che egli sapeva che non era una cattura tutti – DGS

2

Rileva mobile su finestra evento onload quindi rimuovere href

var remHref = function(){ 
    if(!!window.orientation){ 
     document.getElementById('crest').href = "#"; 
    } 
} 
// or use e.preventDefault() on link onclick event 

window.onload = remHref