Two JavaScript solutions for image adaptation in mobile Web_javascript skills

This article mainly talks about the solutions to two common situations: adaptive center display of images on the Web according to the size of the mobile phone screen, and adaptive image adaptation. Let’s get started
When working on a Web wap page that works with mobile clients, I found that there are two particularly important situations where articles require image display. One is for atlases. This kind of article only needs to be browsed by swiping left and right. The best experience is to have the images zoom and display. Within the effective range of the screen, it prevents the user from having to slide their finger to move the image to view the image because it is too large, which greatly reduces the user experience. The second is articles with mixed graphics and text. The maximum width of the picture does not exceed the width of the screen, and the height can be auto. Both situations are common in projects. In addition, some people talk about making a picture cutting tool and setting the picture size ratio to a unified size, but even so, facing mobile device screens of various sizes, it is impossible to apply a unified solution. And if there are too many demands, how many images of different sizes must be stored on the server? The display is not very realistic.

The following is the type of album. The demander requires that the height and width of the images should be kept within the visual field of view of the mobile phone. The js code is listed below:

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

Note: During the test, it was found that the Android 4.0 system does not support the window.screen.width property well. In many cases, the screen pixels returned when loading for the first time are incorrect. My Android 2.3.3 system passed the test and supports this attribute. It is said that this is a bug in the Android system, and this problem can be solved by setting the delay time through setTimeout. However, this method does not work no matter how I test it. So I might as well find another solution. I found that window.innerWidth can take on this important task, and no compatibility issues were found, ok.

The following is the second case, an article type with pictures and texts. At this time, only the width of the picture and the width of the mobile phone are required, and there is no limit on the height, which is relatively easy.
Transform the above javascript code as follows:

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

Note: The resize function in the code captures changes in the screen window and always ensures that the image is displayed reasonably according to the screen width. Of course, the premise is that like my project, the article is directly in rich text format, and the parent tag of the image has set the centering attribute of text-align:center. If the content of your article directly calls a third party, then you can add the corresponding processing statement to the above javascript code.