Meta viewport SOLO per telefoni?

C'è un modo per impostare il meta viewport responsive generale() solo per i telefoni? Abbiamo un sito web che, senza che meta tag, zoom out, guarda bene su 7" e tavolette più grandi, verticale e orizzontale, ma era solo un po 'troppo scomodo su dispositivi più piccoli.Meta viewport SOLO per telefoni?

Quindi, per farlo funzionare come volevamo sui telefoni, ho dovuto usare il tag <meta name="viewport">, che poi ha costretto alcuni media query per sistemare le cose sui dispositivi più grandi.

c'è un modo per impostare che meta tag sui telefoni, e di default solo dispositivo di zoom out vista sul più grande

Grazie! Rich

fonte

2013-08-08 user1050887

Intendi questo <meta name="viewport">?

<meta name="viewport" content="width=device-width, user-scalable=no" />

In tal caso, provare il seguente script aggiunto nella <head> (tratto e adattato da here):

if(navigator.userAgent.match(/Android/i) 
    || navigator.userAgent.match(/webOS/i) 
    || navigator.userAgent.match(/iPhone/i) 
    || navigator.userAgent.match(/iPad/i) 
    || navigator.userAgent.match(/iPod/i) 
    || navigator.userAgent.match(/BlackBerry/i) 
    || navigator.userAgent.match(/Windows Phone/i)) { 
    document.write('<meta name="viewport" content="width=device-width, user-scalable=no" />'); 
}

Questo rileverà se l'user-agent indica che il browser è mobile, e la volontà scrivi quella meta vista come richiesto.

fonte

2013-08-08 21:25:12

perfetto, grazie! – user1050887

Se la mia risposta ha aiutato, votarla e contrassegnarla come risposta facendo clic sul segno di spunta a sinistra. Facendo ciò, gli altri sanno che la tua domanda ha avuto risposta, e sia tu che io guadagniamo reputazione. Ognuno vince! –

Questo non risponde alla domanda, vero? Ciò continuerà a colpire ipad e tablet Android. – AlexTazh

Per ottenere ciò, non utilizzare il tag <meta> e non utilizzare le query @media all'interno del file .css generale.

Invece, utilizzare questo tipo di tag:

<link rel="stylesheet" media="only screen and (max-device-width: 320px)" href="wp-content/themes/thestory/css/320.css">

E creare stili per i dispositivi nel file css separato (come 320.css in questo esempio).

fonte

2016-01-04 12:27:17 AlexTazh

In realtà, questa potrebbe essere una soluzione migliore: Aggiungere uno script dopo il tag meta viewport che cambierà il valore se lo schermo è più grande di quanto specificato.

<meta id="testViewport" name=viewport content="width=device-width, initial-scale=1"> 
<script> 
if (screen.width > 590) { 
    var mvp = document.getElementById('testViewport'); 
    mvp.setAttribute('content','width=980'); 
} 
</script>

Ci possono essere variazioni di questo script. Ad esempio, è possibile impostare la larghezza dello schermo effettiva come viewport anziché come valore fisso.

fonte

2016-01-04 15:45:55 AlexTazh

risposta

Problemi correlati