it-swarm.com.de

passen Sie mobile Webinhalte mithilfe von Viewport-Metatags an

Ich versuche herauszufinden, wie Sie das mobile Viewport-Meta-Tag nutzen können, um den Inhalt einer HTML-Seite automatisch zu zoomen, um in eine Webansicht zu passen. 

Einschränkungen:

  • Das HTML kann Elemente mit fester Größe enthalten oder nicht (ex img hat eine feste Breite von 640). Mit anderen Worten, ich möchte nicht, dass der Inhalt fließend ist und% verwendet.
  • Ich weiß nicht, wie groß der Webview ist, ich kenne nur das Seitenverhältnis

Wenn ich beispielsweise ein einzelnes Bild (640x100px) habe, möchte ich das Bild herauszoomen, wenn der Webview 300x250 ist (herunterskalieren). Wenn der Webview hingegen 1280x200 ist, möchte ich, dass das Bild vergrößert wird und den Webview ausfüllt (skalieren, um zu passen).

Nach dem Lesen der Android-Dokumente und der iOS-Dokumente in Ansichtsfenstern erscheint es einfach: Da ich die Breite meines Inhalts (640) kenne, stelle ich die Breite des Ansichtsfensters auf 640 ein und lasse den Webview entscheiden, ob er es ist muss den Inhalt nach oben oder unten skalieren, um ihn an die Webansicht anzupassen.

Wenn ich Folgendes in meinen Android/iPhone-Browser OR eines 320x50-Webview stecke, wird das Bild nicht entsprechend der Breite verkleinert. Ich kann das Bild nach rechts und links scrollen.

<!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>

Was mache ich hier falsch? Vergrößert das Viewport-Meta-Tag nur den Inhalt des Webview-Bereichs?

33
rynop

Im Kopf fügen Sie dies hinzu

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

Ich denke, das sollte dir helfen.

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

Sag mir, ob es funktioniert.

P/s: Hier ist eine Medienabfrage für Standardgeräte. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

19
Daniel Ta

Für Android wird das Target-Density-Tag hinzugefügt.

target-densitydpi=device-dpi

Der Code würde also aussehen

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

Bitte beachten Sie, dass ich glaube, dass diese Ergänzung nur für Android gilt (aber da Sie Antworten haben, war dies meiner Meinung nach eine gute Ergänzung), aber dieses sollte für die meisten mobilen Geräte funktionieren.

8
Dave

ok, hier ist meine endgültige Lösung mit 100% nativem Javascript:

<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

Durch Hinzufügen von style="width:100%;max-width:640px" zum Bild-Tag wird es auf die Breite des Ansichtsfensters skaliert, d. H. Bei größeren Fenstern wirkt es fest.

2
Axel

Fügen Sie einen Stil hinzu = "width: 100%;" zum img-Tag. Auf diese Weise füllt das Bild die gesamte Breite der Seite aus und verkleinert sich, wenn das Bild größer als der Darstellungsbereich ist.

0
AlexanderZ

Ich hatte das gleiche Problem wie Ihr, aber mein Anliegen war die Listenansicht. Wenn ich versuche, die Listenansicht zu scrollen, scrollen Sie auch etwas. Problem war Listenansichtshöhe kleiner als Höhe des Viewports (Browser). Sie müssen nur die Höhe Ihres Viewports unter die Höhe des Inhalts-Tags (Listenansicht innerhalb des Inhalts-Tags) reduzieren. Hier ist mein Meta-Tag.

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

Hoffe, das wird helfen.Thnks.

0
shalin