risposta-alla-domanda-sullo-sviluppo-web-bd.com

adattamento scalabile di contenuti web per dispositivi mobili utilizzando il meta tag viewport

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. 

Vincoli:

  • L'HTML può avere o meno degli elementi a dimensione fissa (ex img ha una larghezza fissa di 640). In altre parole, non voglio forzare il contenuto a essere fluido e usare% 's.
  • Non conosco le dimensioni della visualizzazione Web, conosco solo le proporzioni

Ad esempio, se ho una singola immagine (640x100px) voglio che l'immagine si riduca se la webview è 300x250 (ridimensiona per adattarla). D'altra parte, se la webview è 1280x200, voglio che l'immagine si ingrandisca e riempia la webview (scala per adattarsi).

Dopo aver letto i documenti Android e i documenti iOS sulle finestre, sembra semplice: poiché conosco la larghezza del mio contenuto (640), ho impostato la larghezza della vista su 640 e ho lasciato che la webview decidesse se ha bisogno di ridimensionare il contenuto in alto o in basso per adattarlo alla webview.

Se inserisco quanto segue nel browser Android/iPhone OR in una webview 320 x 50, l'immagine non si riduce 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 del viewport esegue solo lo zoom nel contenuto che è <l'area webview?

androidiphoneiosmobileviewport
33
rynop

In testa aggiungi 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>
55
Bren1818

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/

19
Daniel Ta

Per Android c'è l'aggiunta del tag target-density.

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" />

Tieni presente che ritengo che questa aggiunta sia solo per Android (ma dal momento che hai delle risposte, ho ritenuto che fosse un buon extra) ma questo dovrebbe funziona per la maggior parte dei dispositivi mobili.

8
Dave

ok, ecco la mia soluzione finale con javascript nativo al 100%:

<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>
5
saike

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

2
Axel

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 finestra.

0
AlexanderZ

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

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

Spero che questo aiuterà.

0
shalin