This article mainly talks about the two common solutions for pictures in the Web according to the size of the mobile phone screen, adaptive and centered, and picture adaptive. let's start
When working on the Web wap page with the mobile client, I found that the article has two particularly important requirements for image display. One is for the atlas, this kind of article only needs to be swiped left and right to browse, and the best experience is to make the image zoom and display. Within the effective range of the screen, to prevent the picture from being too large, the user needs to slide the finger to move the picture to view such a laborious thing, and the user experience is greatly reduced. The second is an article with mixed images and text. The maximum width of the image does 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 be a picture cutting tool and set the picture size ratio to a uniform size, but even so, in the face of mobile device screens of various sizes, it is impossible to apply a unified solution to solve it. And if there is too much demand, how many images of different sizes must be stored on the server? The display does not correspond to reality.
The following is the type of the atlas. The demander requires that the height and width of the picture 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");
//Android 4.0+ and other higher versions do not support window.screen.width, and Android 2.3.3 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: During the test, it was found that the Android 4.0+ system did not support the window.screen.width property well. In many cases, the screen pixels returned when the first load was loaded were incorrect. My Android 2.3.3 system has passed the test and supports this attribute. It is said that this is a bug of the Android system, which can be solved by setting the delay time through setTimeout. However, this method, no matter how I tested it, did not work. So simply look for another brilliant. It is found that window.innerWidth can take on this important task, and no compatibility problems were found, ok.
Below is, the second case, the type of article with pictures and texts. At this time, there are only requirements for the width of the picture and the width of the mobile phone, and there is no restriction on the height, which is relatively easy.
Modify the above javascript code as follows:
<script type="text/javascript">
$(function(){
var imglist =document.getElementsByTagName("img");
//Android 4.0+ and other higher versions do not support window.screen.width, and Android 2.3.3 system supports
var _width;
doDraw ();
window.onresize = function(){
//Capture screen window changes, always ensure that the picture is displayed reasonably according to the screen width
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(){
//Restriction, only display images with width and 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 changes of the screen window and always ensure that the picture is displayed reasonably according to the width of the screen. 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, you can add the corresponding processing statement to the above javascript code.
This article is reproduced from: http://blog.csdn.net/freshlover/article/details/9720515