Mobile Station web development Picture Adaptive two common situation solutions

This article is mainly about the web in the picture according to the mobile phone screen size Adaptive center display, picture Adaptive two common situation solutions. Let's go

When doing the Web WAP page with the mobile client, it is found that there are two special situations in the demand of the picture display, one is for the Atlas, this kind of article only need to swipe left and right to browse, the best experience is to let the picture zoom display in the screen valid range, The user experience is greatly reduced by preventing the picture from being too large causing the user to swipe their finger to move the picture to see this laborious thing. The second is the picture and text of the article, the maximum width of the image does not exceed the screen width, height can auto. Both of these situations are common in projects. In addition, some people say to do a picture cutting tool, the picture size ratio is set to a uniform size, but even so, in the face of various sizes of mobile device screen, is not applicable to a unified solution can be solved. And if there is too much demand, how many different sizes of images will be stored on the server? The display is less realistic.

The following is the atlas type, demand side requirements picture aspect are kept in the phone visual field of view, JS code listed below:

<script type= "Text/javascript" >      $(function(){            varImglist =document.getelementsbytagname ("img"); //Android 4.0+ version does not support Window.screen.width, Android 2.3.3 System support    /*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 (); }            functionDodraw () {_width=window.innerwidth; _height= window.innerheight-20;  for(vari = 0, len = imglist.length; i < Len; i++) {DrawImage (imglist[i],_width,_height); }      }            functionDrawImage (imgd,_width,_height) {varImage=NewImage (); 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: The system found in the test for Android 4.0+ does not support the Window.screen.width attribute, and in many cases the screen pixels returned during the first load are incorrect. My Android 2.3.3 system was tested and supported by this property. It is said that this is an Android bug, you can set the delay time by settimeout to solve this problem. However, this method, I how to test is not feasible. So let's just find another smart one. Found that window.innerwidth can take this responsibility, no compatibility problems found, OK.

Here is the second case, an illustrated article type. At this time only the width of the picture and the width of the phone to adapt to the requirements, the height of the restrictions, relatively easy.

Transform the above JavaScript code, as follows:

<script type= "Text/javascript" >      $(function(){      varImglist =document.getelementsbytagname ("img"); //Android 4.0+ version does not support Window.screen.width, Android 2.3.3 System support    var_width;            Dodraw (); Window.onresize=function(){          //capture Screen window changes, always ensure that the picture is properly displayed according to the screen widthDodraw (); }            functionDodraw () {_width=window.innerwidth;  for(vari = 0, len = imglist.length; i < Len; i++) {DrawImage (imglist[i],_width); }      }            functionDrawImage (imgd,_width) {varImage=NewImage (); IMAGE.SRC=imgd.src; Image.onload=function(){              //limit, display processing only for images with a wide height greater than 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>

Description: The resize function in the code is to capture the screen window changes and always ensure that the picture is displayed reasonably according to the screen width. Of course, the premise is like my project, the article directly for the rich Text format, the picture's parent tag has set the Text-align:center center attribute. If your content is directly calling a third-party, you can add the appropriate processing statement to the JavaScript code above.

Mobile Station web development Picture Adaptive two common situation solutions