Two JavaScript solutions for image adaptation in moving Web

In this paper, images in Web are adaptive to center display according to the screen size of the mobile phone, and images are adaptive to two common situations. Let's start
Doing with mobile client Web wap page, find demand for image shows there are two kinds of article are especially important, 1 is for atlas, this article only need to slide around browsing, the best experience is to make the effective range, zooming displayed on the screen to prevent the picture is too big lead to the user needs to slide the fingers moving images to view this effort, the user experience is reduced greatly. The maximum width of the picture should not exceed the width of the screen and the height can be auto. Both of these situations are common in projects. In addition, some people say to make a picture cutting tool, set the picture size and proportion to the size of unified 1, but even so, in the face of various sizes of mobile device screens, it is impossible to apply a unified 1 solution to solve. And if the demand is too high, how many different sizes of images should be stored on the server? The display is not quite realistic.

The following is the type of the atlas. The demanders require that the height and width of the pictures should be kept within the visual field of the mobile phone. The js code is listed below:

<script type="text/javascript"> 
$(function(){ 
 
var imglist =document.getElementsByTagName("img"); 
// The android 4.0+ The contour version is not supported window.screen.width The android 2.3.3 The system supports  
/* 
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: Android 4.0+ was found to have poor support for the window.screen.width attribute in tests. In many cases, the screen pixels returned from the first load were incorrect. My Android 2.3.3 system test has passed, which supports this attribute. It's said to be bug on Android, which can be used to set latency times. However, this method, How I can not test. So you might as well look elsewhere. window.innerWidth found to be able to handle this task, no compatibility issues found, ok.

Here is the second case, illustrated article type. At this time only to the width of the picture and the width of the phone to adapt to the requirements, do not limit the height, relatively easy.
Modify the javascript code above as follows:

<script type="text/javascript"> 
$(function(){ 
var imglist =document.getElementsByTagName("img"); 
// The android 4.0+ The contour version is not supported window.screen.width The android 2.3.3 The system supports  
var _width; 
doDraw(); 
 
window.onresize = function(){ 
  // Capture screen window changes, always make sure that the picture shows properly according to the width of the screen  
  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(){ 
    // The limit is greater than width and height only 30 The picture does display processing  
    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> 

resize function in the code, is to capture the screen window changes, always ensure the picture according to the screen width reasonable display. Of course, if, as in my project 1, the article is directly in rich text format, the parent tag of the image has been set to the middle attribute of ES34en-ES35en :center. If the content of your article calls party 3 directly, you can add the corresponding processing statement to the javascript code above.