È possibile disabilitare le query @media o forzare una risoluzione? Motivo: consentire a un iphone di visualizzare il sito desktop?

Ho il mio sito modificato HEAVILY tramite le query @media per visualizzare molto slimdown'd sui telefoni cellulari. Tuttavia, i miei utenti chiedono la versione desktop del sito (disponibile tramite un link).È possibile disabilitare le query @media o forzare una risoluzione? Motivo: consentire a un iphone di visualizzare il sito desktop?

Per andare oltre, anche il sito desktop stesso viene modificato dalle query @media a seconda della risoluzione. Stavo pensando di scegliere una risoluzione 'desktop', diciamo 1440x900 e forzando la visualizzazione del telefono cellulare a quella risoluzione?

È possibile, potrebbe passare attraverso jscript? In alternativa, queste query @media possono essere disabilitate tutte insieme?

Grazie!

fonte

2013-03-13 Mark

Sarà necessario disattivare il foglio di stile che contiene queste regole piuttosto che disabilitare le regole individualmente. – BoltClock

Ho avuto lo stesso problema con un cliente. Ma il problema era che c'erano più di 120 file css contenenti le query dei media. Quindi quello che ho fatto è impostare la larghezza della vista. Ho usato questo frammento su quel sito e funzionante. Usando questo, anche tu puoi dare la possibilità per gli utenti di passare dalla progettazione reattiva alla progettazione non reattiva.

$(document).ready(function(){ 
    $('meta[name="viewport"]').prop('content', 'width=1440'); 
});

Nota: qui, 1440 è il vostro preferito larghezza dello schermo.

Spero che questo aiuti :)

fonte

2013-11-22 05:21:54 IJas

Non riesco a farlo funzionare affatto. Puoi spiegarci di più? Ecco la demo in cui sto provando questa soluzione. http://plnkr.co/edit/qWEImTg5VB63BD1EL4FW?p=preview Facendo clic sul pulsante si modifica la larghezza della vista su 1000 e il testo dovrebbe cambiare. – m59

+10

Questa risposta può essere utile per gli sviluppatori che tentano di forzare un sito desktop su dispositivi mobili (come la domanda chiede) ma non funziona nel contrario (forzare il cellulare sul desktop o anche sul desktop). Questo perché i browser desktop non rispettano il tag , è visto solo dai browser mobili. Per quel caso, la soluzione di Romo è migliore. – patr1ck

Proprio quello di cui avevo bisogno, grazie! – nsilva

È più facile mettere tutti gli stili che potrebbero dover essere disattivati nei propri fogli di stile, con gli attributi del titolo per renderli più facili da trovare. Possono essere in linea stile o collegare elementi ai file .css.

function toggleSheet(title){ 
    var S=document.styleSheets, L=S.length, temp; 
    while(L){ 
    temp=S[--L]; 
    if(temp.title===title){ 
    temp.disabled=!temp.disabled; 
    return temp; 
    } 
}

fonte

2013-03-13 17:03:06 kennebec

vorrei aggiungere una classe al vostro <html> o <body> quali class="force-desktop" e poi sul selettore di supporto aggiungere

@media() { 
    body:not(.force-desktop) { 
     //styles 
    } 
}

o qualcosa di simile

fonte

2013-03-13 17:43:23 romo

funziona come un fascino, grazie – Alex

@romo come si può fare lo stesso, ma per forza-mobile? dal momento che verrà applicato il desktop, ma il mobile verrà applicato solo quando viene raggiunta la query multimediale, ma desidero visualizzare la visualizzazione mobile con un nome di classe 'force-mobile' – Basit

Non so cosa intendi, ma questa è una vecchia risposta. Potresti ancora fare '.force-mobile' e' body.force-mobile' per stili specifici. – romo

La soluzione di IJas senza JQuery assomiglia:

var viewport = document.querySelector("meta[name=viewport]"); 
viewport.setAttribute('content', width=1440);

fonte

2016-07-07 14:49:14

È possibile disabilitare le query @media o forzare una risoluzione? Motivo: consentire a un iphone di visualizzare il sito desktop?

risposta

Problemi correlati