Two JavaScript solutions for image adaptation in mobile web

This article mainly talks about two common solutions for the two common situations of images in the web, which are adaptively centered according to the size of the mobile phone screen. Let's get started
When working on the web wap page that matches the mobile client, I found that there are two particularly important situations in the article's need to display images. One is that for the picture album, this kind of article only needs to swipe left and right to browse. The best experience is to let the picture zoom be displayed within the effective range of the screen, preventing the picture from being too large, causing the user to need to slide the finger to move the picture to view such a laborious thing, which greatly reduces the user experience. The second is articles with mixed pictures and texts. The maximum width of the picture does not exceed the screen width and the height can be auto. Both of these situations are common in projects. In addition, some people say that a picture cutting tool can set the image size ratio to a unified size, but even so, it is impossible to apply a unified solution to the problem when facing mobile device screens of various sizes. And if there is too much demand, how many pictures of different sizes have to be stored on the server? The display is not very realistic.

The following is the picture atlas type. The demand side requires that the height and width of the picture be kept within the mobile phone's visual field of view. The js code is listed below:

<script type="text/javascript"> 
$(function(){ 
 
var imglist =("img"); 
//Android 4.0+ and other versions are not supported, and the Android 2.3.3 system supports it/* 
var _width = ; 
var _height =  - 20; 
 
var _width = ; 
var _height =  - 20; 
*/ 
var _width,  
  _height; 
doDraw(); 
 
 = function(){ 
  doDraw(); 
} 
 
function doDraw(){ 
  _width = ; 
  _height =  - 20; 
  for( var i = 0, len = ; i < len; i++){ 
    DrawImage(imglist[i],_width,_height); 
  } 
} 
 
function DrawImage(ImgD,_width,_height){  
  var image=new Image();  
  =;  
   = function(){ 
    if(>30 && >30){  
    
      if(/>= _width/_height){  
        if(>_width){ 
          =_width;  
          =(*_width)/;  
        }else{  
          =;  
          =;  
        }  
      }else{  
        if(>_height){ 
          =_height;  
          =(*_height)/;  
        }else{  
          =;  
          =;  
        }  
      } 
    }   
  } 
 
} 
   
}) 
</script> 

Note: During the test, it was found that the Android 4.0+ system does not support the attributes well. In many cases, the screen pixels returned when loaded for the first time are incorrect. My Android 2.3.3 system test passed 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 out. However, this method cannot be tested no matter how hard I test it. So just look for another skill. I found that I could take on this important task, but no compatibility issues were found, OK.

The following is the second case, the type of articles with pictures and texts. At this time, there are only requirements for the image width and the phone width adaptation, and there is no limit on the height, which is relatively easier.
Reform the above javascript code, as follows:

<script type="text/javascript"> 
$(function(){ 
var imglist =("img"); 
//Android 4.0+ and other versions are not supported, and the Android 2.3.3 system supports itvar _width; 
doDraw(); 
 
 = function(){ 
  //Snap changes in the screen window and always ensure that the picture is displayed reasonably according to the screen width  doDraw(); 
} 
 
function doDraw(){ 
  _width = ; 
  for( var i = 0, len = ; i < len; i++){ 
    DrawImage(imglist[i],_width); 
  } 
} 
 
function DrawImage(ImgD,_width){  
  var image=new Image();  
  =;  
   = function(){ 
    //Limit, only display images with width and height greater than 30    if(>30 && >30){  
      if(>_width){ 
        =_width;  
        =(*_width)/;  
      }else{  
        =;  
        =;  
      }  
 
    }   
  } 
 
} 
   
}) 
</script> 

Note: The resize function in the code captures changes in the screen window and always ensures that the picture 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 your article content is called directly by a third party, then you can add the corresponding processing statements to the above javascript code.