contenuto web mobile in scala usando il meta tag della vista

Sto cercando di capire come sfruttare il meta tag mobile viewport per ingrandire automaticamente il contenuto di una pagina HTML per adattarlo a una visualizzazione web.contenuto web mobile in scala usando il meta tag della vista

Vincoli:

elementi di dimensioni

Il codice HTML può o non può essere fisso (ex IMG ha una larghezza fissa di 640). In altre parole, non voglio forzare il contenuto a essere fluido e usare% 's.
non so le dimensioni del WebView, so solo le proporzioni

Per esempio, se ho una singola immagine (640x100px) voglio l'immagine per diminuire se il WebView è 300x250 (ridimensionare per adattarsi). D'altra parte, se la webview è 1280x200, voglio che l'immagine si ingrandisca e riempia la webview (scala per adattarsi).

Dopo aver letto il android docs e il iOS docs su finestre, sembra semplice: perché so la larghezza dei miei contenuti (640) ho appena impostato la larghezza finestra a 640 e lasciare che il WebView decidere se ha bisogno di scalare il contenuto up o giù per adattarsi alla webview.

Se inserisco quanto segue nel mio browser Android/iPhone O in una webview 320x50, l'immagine non diminuisce per adattarsi alla larghezza. Posso scorrere l'immagine a destra e sinistra ..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Test Viewport</title> 
    <meta name="viewport" content="width=640" /> 
    <style type="text/css"> 
    html, body { 
     margin: 0; 
     padding: 0; 
     vertical-align: top; 
    } 

    h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td 
    { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-weight: normal; 
     font-style: normal; 
     font-size: 100%; 
     line-height: 1; 
     font-family: inherit; 
     vertical-align: top; 
    }  
    </style> 
    </head> 
    <body> 
    <img src="http://www.dmacktyres.com/img/head_car_tyres.jpg"> 
    </body> 
</html>

Cosa sto facendo di sbagliato qui? Il meta tag di viewport esegue solo lo zoom sul contenuto che è < nell'area di visualizzazione Web?

fonte

2012-01-04 rynop

avete soluzione per questo ancora? – Superbiji

No, non ancora. Suppongo che non sia possibile una soluzione semplice – rynop

Prova ad aggiungere uno stile = "larghezza: 100%;" al tag img. In questo modo l'immagine riempirà l'intera larghezza della pagina, quindi ridimensionerà se l'immagine è più grande della vista.

fonte

2012-01-10 20:49:44 AlexanderZ

sì che risolva il problema se tutto è fluido, ma secondo il mio secondo punto: "Non voglio forzare il contenuto a essere fluido e usare%" s ". Pensa a un intero sito web con un gruppo di elementi in esso - div, canvas, iframe, ecc ... Conosco il fisso con della pagina - Voglio che la webview ingrandisca/esca esattamente alla larghezza fissa I specificare. – rynop

Aggiungendo style="width:100%;max-width:640px" al tag immagine lo scalerà fino alla larghezza della finestra, vale a dire per finestre più grandi avrà una larghezza fissa.

fonte

2012-02-07 12:53:48 Axel

non scalare ma espandersi –

Penso che questo dovrebbe aiutarti.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Dimmi se funziona.

P/s: ecco alcuni media query per dispositivi standard. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

fonte

2012-09-13 16:50:03

Semplice e funziona come un fascino –

E con questo si accingerà a rendere scalare/zoomare impossibile per gli utenti con disabilità visive, che non sono in grado di leggere nella dimensione del carattere scelta da tu. –

Nella testa aggiungere questo

//Include jQuery 
<meta id="Viewport" name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 

<script type="text/javascript"> 
$(function(){ 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
    var ww = ($(window).width() < window.screen.width) ? $(window).width() : window.screen.width; //get proper width 
    var mw = 480; // min width of site 
    var ratio = ww/mw; //calculate ratio 
    if(ww < mw){ //smaller than minimum size 
    $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww); 
    }else{ //regular size 
    $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); 
    } 
} 
}); 
</script>

fonte

2013-01-05 20:10:50 Bren1818

nice, solo alcune mod e le sue opere belle – waza123

Bella soluzione, ma penso che ci sia un refuso nel meta tag viewport. L'attributo dovrebbe essere contenuto, non larghezza, giusto? –

per Android v'è l'aggiunta di tag bersaglio densità.

target-densitydpi=device-dpi

Quindi, il codice sarebbe simile

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0, maximum-scale=1, user-scalable=yes" />

Si prega di notare, che credo che questa aggiunta è solo per Android (ma poiché avete le risposte, ho sentito questo era un buon extra) ma questo dovrebbe funzionare per la maggior parte dei dispositivi mobili.

fonte

2013-07-22 14:13:37 Dave

Grazie, l'impostazione di target-densitydpi = 2 ha risolto il mio problema come per magia. –

target-densitydpi è stato rimosso da WebKit http://trac.webkit.org/changeset/119527 –

Ho avuto lo stesso problema del tuo, ma la mia preoccupazione era la visualizzazione elenco. Quando provo a scorrere l'elenco, l'intestazione fissa scorre anche un po '. Il problema era altezza vista elenco inferiore all'altezza del viewport (browser). Hai solo bisogno di ridurre l'altezza della vista inferiore rispetto al tag del contenuto (visualizzazione elenco all'interno del tag del contenuto). Ecco il mio meta tag;

<meta name="viewport" content="width=device-width,height=90%, user-scalable = no">

Spero che questo possa essere d'aiuto. Grazie.

fonte

2014-03-26 07:35:25 shalin

ok, ecco la mia soluzione finale con il 100% javascript origini:

<meta id="viewport" name="viewport"> 

<script type="text/javascript"> 
//mobile viewport hack 
(function(){ 

    function apply_viewport(){ 
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { 

     var ww = window.screen.width; 
     var mw = 800; // min width of site 
     var ratio = ww/mw; //calculate ratio 
     var viewport_meta_tag = document.getElementById('viewport'); 
     if(ww < mw){ //smaller than minimum size 
     viewport_meta_tag.setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + mw); 
     } 
     else { //regular size 
     viewport_meta_tag.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + ww); 
     } 
    } 
    } 

    //ok, i need to update viewport scale if screen dimentions changed 
    window.addEventListener('resize', function(){ 
    apply_viewport(); 
    }); 

    apply_viewport(); 

}()); 
</script>

fonte

2016-09-22 14:49:56 saike

contenuto web mobile in scala usando il meta tag della vista

risposta

Problemi correlati