모바일 Web_javascript 기술의 이미지 적응을 위한 두 가지 JavaScript 솔루션

이 기사에서는 휴대폰 화면 크기에 따른 웹상의 이미지 적응형 센터 표시와 적응형 이미지 적응이라는 두 가지 일반적인 상황에 대한 솔루션을 주로 설명합니다. 시작해 보세요
모바일 클라이언트와 작동하는 웹 페이지에서 작업할 때 기사에 이미지 표시가 필요한 두 가지 중요한 상황이 있다는 것을 발견했습니다. 하나는 왼쪽과 오른쪽으로 스와이프하여 탐색하면 되는 경우입니다. 경험은 이미지를 확대하여 표시하는 것입니다. 화면의 유효 범위 내에서 이미지가 너무 커서 사용자가 이미지를 이동하기 위해 손가락을 밀어야 하는 것을 방지하여 사용자 경험을 크게 줄입니다. 두 번째는 그래픽과 텍스트가 혼합된 기사입니다. 그림의 최대 너비는 화면 너비를 초과하지 않으며 높이는 자동으로 설정할 수 있습니다. 두 상황 모두 프로젝트에서 일반적입니다. 또한, 어떤 사람들은 사진 자르기 도구를 만들고 사진 크기 비율을 통일된 크기로 설정하자고 이야기하지만, 그렇다고 해도 다양한 크기의 모바일 기기 화면을 마주하면 통일된 솔루션을 적용하는 것은 불가능합니다. 수요가 너무 많으면 크기가 다른 이미지를 몇 개나 서버에 저장해야 합니까? 디스플레이가 그다지 현실적이지 않습니다.

다음은 앨범 유형입니다. 요구자는 이미지의 높이와 너비가 휴대폰의 시야 범위 내에서 유지되어야 한다고 요구합니다. js 코드는 다음과 같습니다.

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

참고: 테스트 중에 Android 4.0 시스템이 window.screen.width 속성을 제대로 지원하지 않는 것으로 나타났습니다. 처음 로드할 때 반환되는 화면 픽셀이 잘못된 경우가 많습니다. 내 Android 2.3.3 시스템이 테스트를 통과했으며 이 속성을 지원합니다. 이는 안드로이드 시스템의 버그라고 하는데, setTimeout을 통해 지연 시간을 설정하면 이 문제를 해결할 수 있다고 합니다. 하지만 이 방법은 아무리 테스트해도 작동하지 않습니다. 그러니 다른 해결책을 찾는 게 나을 수도 있겠네요. window.innerWidth가 이 중요한 작업을 수행할 수 있으며 호환성 문제는 발견되지 않았습니다.

다음은 두 번째 경우, 사진과 텍스트가 포함된 기사 유형입니다. 이때 사진의 가로폭과 휴대폰의 가로폭만 필요하며, 높이에는 제한이 없어 비교적 쉽습니다.
위의 자바스크립트 코드를 다음과 같이 변환하세요.

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

참고: 코드의 크기 조정 기능은 화면 창의 변경 사항을 캡처하고 항상 이미지가 화면 너비에 따라 합리적으로 표시되도록 합니다. 물론 전제는 내 프로젝트와 마찬가지로 기사가 직접 서식 있는 텍스트 형식이고 이미지의 상위 태그에 text-align:center의 중심 속성이 설정되어 있다는 것입니다. 귀하의 기사 내용이 제3자를 직접 호출하는 경우 위의 자바스크립트 코드에 해당 처리 문을 추가할 수 있습니다.