Dua penyelesaian JavaScript untuk penyesuaian imej dalam kemahiran Web_javascript mudah alih

Artikel ini terutamanya membincangkan penyelesaian kepada dua situasi biasa: paparan tengah suai imej di Web mengikut saiz skrin telefon mudah alih dan penyesuaian imej suai. Jom mulakan
Apabila bekerja pada halaman wap Web yang berfungsi dengan pelanggan mudah alih, saya mendapati bahawa terdapat dua situasi penting yang mana artikel memerlukan paparan imej Satu artikel jenis ini hanya perlu dilayari dengan meleret ke kiri dan ke kanan pengalaman adalah untuk mengezum dan memaparkan imej dalam julat skrin yang berkesan, ia menghalang pengguna daripada perlu meluncurkan jari mereka untuk menggerakkan imej untuk melihat imej kerana ia terlalu besar, yang sangat mengurangkan pengalaman pengguna. Yang kedua ialah artikel dengan grafik dan teks bercampur Lebar maksimum gambar tidak melebihi lebar skrin, dan ketinggian boleh menjadi automatik. Kedua-dua situasi adalah biasa dalam projek. Di samping itu, sesetengah orang bercakap tentang membuat alat pemotong gambar dan menetapkan nisbah saiz gambar kepada saiz bersatu, tetapi walaupun begitu, menghadapi skrin peranti mudah alih pelbagai saiz, adalah mustahil untuk menggunakan penyelesaian bersatu. Dan jika terdapat terlalu banyak permintaan, berapa banyak imej yang berbeza saiz mesti disimpan pada pelayan? Paparan tidak begitu realistik.

Berikut ialah jenis album Penuntut menghendaki ketinggian dan lebar imej harus disimpan dalam medan paparan telefon mudah alih Kod js disenaraikan di bawah:

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

Nota: Semasa ujian, didapati bahawa sistem Android 4.0 tidak menyokong sifat window.screen.width dengan baik Dalam kebanyakan kes, piksel skrin yang dikembalikan semasa memuatkan buat kali pertama adalah tidak betul. Sistem Android 2.3.3 saya lulus ujian dan menyokong atribut ini. Dikatakan bahawa ini adalah pepijat dalam sistem Android, dan masalah ini boleh diselesaikan dengan menetapkan masa tunda melalui setTimeout. Walau bagaimanapun, kaedah ini tidak berfungsi tidak kira bagaimana saya mengujinya. Jadi saya mungkin mencari penyelesaian lain. Saya mendapati bahawa window.innerWidth boleh menjalankan tugas penting ini dan tiada isu keserasian ditemui, ok.

Berikut ialah kes kedua, jenis artikel dengan gambar dan teks. Pada masa ini, hanya lebar gambar dan lebar telefon bimbit diperlukan, dan tiada had ketinggian, yang agak mudah.
Ubah kod javascript di atas seperti berikut:

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

Nota: Fungsi ubah saiz dalam kod menangkap perubahan dalam tetingkap skrin dan sentiasa memastikan imej dipaparkan secara munasabah mengikut lebar skrin. Sudah tentu, premisnya ialah seperti projek saya, artikel itu secara langsung dalam format teks kaya dan teg induk imej telah menetapkan atribut pemusatan text-align:center. Jika kandungan artikel anda secara langsung memanggil pihak ketiga, maka anda boleh menambah pernyataan pemprosesan yang sepadan pada kod javascript di atas.