Zwei JavaScript-Lösungen zur Bildanpassung in mobilen Web_Javascript-Fähigkeiten

In diesem Artikel geht es hauptsächlich um Lösungen für zwei häufige Situationen: die adaptive zentrale Anzeige von Bildern im Web entsprechend der Größe des Mobiltelefonbildschirms und die adaptive Bildanpassung. Fangen wir an
Bei der Arbeit an einer Web-WAP-Seite, die mit mobilen Clients funktioniert, habe ich festgestellt, dass es zwei besonders wichtige Situationen gibt, in denen die Anzeige von Bildern erforderlich ist. Diese Art von Artikel muss nur durch Wischen nach links und rechts durchsucht werden Das Erlebnis besteht darin, dass die Bilder innerhalb des effektiven Bereichs des Bildschirms gezoomt und angezeigt werden. Dadurch wird verhindert, dass der Benutzer mit dem Finger über das Bild streichen muss, um es anzuzeigen, da es zu groß ist, was das Benutzererlebnis erheblich beeinträchtigt. Beim zweiten handelt es sich um Artikel mit gemischten Grafiken und Text. Die maximale Breite des Bildes überschreitet nicht die Breite des Bildschirms und die Höhe kann automatisch eingestellt werden. Beide Situationen kommen in Projekten häufig vor. Darüber hinaus sprechen einige Leute davon, ein Bildschneidewerkzeug zu erstellen und das Bildgrößenverhältnis auf eine einheitliche Größe festzulegen, aber angesichts unterschiedlich großer Bildschirme mobiler Geräte ist es dennoch unmöglich, eine einheitliche Lösung anzuwenden. Und wenn die Anforderungen zu groß sind, wie viele Bilder unterschiedlicher Größe müssen auf dem Server gespeichert werden? Die Darstellung ist nicht sehr realistisch.

Das Folgende ist die Art des Albums. Der Nachfrager verlangt, dass die Höhe und Breite der Bilder im Sichtfeld des Mobiltelefons bleibt. Der js-Code ist unten aufgeführt:

<script type="text/javascript"> 
$(function(){ 
 
var imglist =document.getElementsByTagName("img"); 
//安卓4.0+等高版本不支持window.screen.width，安卓2.3.3系统支持 
/* 
var _width = window.screen.width; 
var _height = window.screen.height - 20; 
 
var _width = document.body.clientWidth; 
var _height = document.body.clientHeight - 20; 
*/ 
var _width,  
  _height; 
doDraw(); 
 
window.onresize = function(){ 
  doDraw(); 
} 
 
function doDraw(){ 
  _width = window.innerWidth; 
  _height = window.innerHeight - 20; 
  for( var i = 0, len = imglist.length; i < len; i++){ 
    DrawImage(imglist[i],_width,_height); 
  } 
} 
 
function DrawImage(ImgD,_width,_height){  
  var image=new Image();  
  image.src=ImgD.src;  
  image.onload = function(){ 
    if(image.width>30 && image.height>30){  
    
      if(image.width/image.height>= _width/_height){  
        if(image.width>_width){ 
          ImgD.width=_width;  
          ImgD.height=(image.height*_width)/image.width;  
        }else{  
          ImgD.width=image.width;  
          ImgD.height=image.height;  
        }  
      }else{  
        if(image.height>_height){ 
          ImgD.height=_height;  
          ImgD.width=(image.width*_height)/image.height;  
        }else{  
          ImgD.width=image.width;  
          ImgD.height=image.height;  
        }  
      } 
    }   
  } 
 
} 
   
}) 
</script> 

Hinweis: Beim Test wurde festgestellt, dass das Android 4.0-System die Eigenschaft window.screen.width nicht gut unterstützt. In vielen Fällen sind die beim ersten Laden zurückgegebenen Bildschirmpixel falsch. Mein Android 2.3.3-System hat den Test bestanden und unterstützt dieses Attribut. Es wird gesagt, dass dies ein Fehler im Android-System ist und dieses Problem gelöst werden kann, indem die Verzögerungszeit über setTimeout festgelegt wird. Diese Methode funktioniert jedoch nicht, egal wie ich sie teste. Also könnte ich genauso gut eine andere Lösung finden. Ich habe festgestellt, dass window.innerWidth diese wichtige Aufgabe übernehmen kann, und es wurden keine Kompatibilitätsprobleme festgestellt, ok.

Das Folgende ist der zweite Fall, ein Artikeltyp mit Bildern und Texten. Derzeit sind nur die Breite des Bildes und die Breite des Mobiltelefons erforderlich, und die Höhe ist nicht begrenzt, was relativ einfach ist.
Transformieren Sie den obigen Javascript-Code wie folgt:

<script type="text/javascript"> 
$(function(){ 
var imglist =document.getElementsByTagName("img"); 
//安卓4.0+等高版本不支持window.screen.width，安卓2.3.3系统支持 
var _width; 
doDraw(); 
 
window.onresize = function(){ 
  //捕捉屏幕窗口变化，始终保证图片根据屏幕宽度合理显示 
  doDraw(); 
} 
 
function doDraw(){ 
  _width = window.innerWidth; 
  for( var i = 0, len = imglist.length; i < len; i++){ 
    DrawImage(imglist[i],_width); 
  } 
} 
 
function DrawImage(ImgD,_width){  
  var image=new Image();  
  image.src=ImgD.src;  
  image.onload = function(){ 
    //限制，只对宽高都大于30的图片做显示处理 
    if(image.width>30 && image.height>30){  
      if(image.width>_width){ 
        ImgD.width=_width;  
        ImgD.height=(image.height*_width)/image.width;  
      }else{  
        ImgD.width=image.width;  
        ImgD.height=image.height;  
      }  
 
    }   
  } 
 
} 
   
}) 
</script> 

Hinweis: Die Größenänderungsfunktion im Code erfasst Änderungen im Bildschirmfenster und stellt immer sicher, dass das Bild entsprechend der Bildschirmbreite angemessen angezeigt wird. Die Voraussetzung ist natürlich, dass der Artikel wie mein Projekt direkt im Rich-Text-Format vorliegt und das übergeordnete Tag des Bildes das Zentrierungsattribut text-align:center festgelegt hat. Wenn der Inhalt Ihres Artikels direkt von Dritten aufgerufen wird, können Sie die entsprechende Verarbeitungsanweisung zum obigen Javascript-Code hinzufügen.