モバイル Web_JavaScript スキルにおける画像適応のための 2 つの JavaScript ソリューション-jsチュートリアル-php.cn

モバイル Web_JavaScript スキルにおける画像適応のための 2 つの JavaScript ソリューション

WBOY

リリース： 2016-05-16 15:54:12

オリジナル

1410 人が閲覧しました

この記事では主に、携帯電話の画面サイズに応じた Web 上の画像の適応型中央表示と適応型画像適応という 2 つの一般的な状況に対する解決策について説明します。始めましょう
モバイルクライアントで動作する Web ワップページで作業しているときに、記事に画像表示が必要になる特に重要な状況が 2 つあることがわかりました。1 つは、この種の記事を左右にスワイプするだけで閲覧できる場合です。画面の有効範囲内で画像をズームして表示することで、画像が大きすぎるためにユーザーが指をスライドして画像を移動する必要がなくなり、ユーザーエクスペリエンスが大幅に低下します。 2 つ目は、グラフィックとテキストが混在する記事です。画像の最大幅は画面の幅を超えず、高さは自動に設定できます。どちらの状況もプロジェクトではよく起こります。また、画像カットツールを作って画像サイズ比率を統一しようという話もありますが、それでも、さまざまなサイズのモバイル端末の画面を前にして、統一したソリューションを適用することは不可能です。また、要求が多すぎる場合、さまざまなサイズの画像を何枚サーバーに保存する必要があるでしょうか?表示はあまり現実的ではありません。

次はアルバムのタイプです。要求者は、画像の高さと幅が携帯電話の視野内に収まるようにする必要があります。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 システムはテストに合格し、この属性をサポートしています。これはAndroidのシステムのバグと言われており、setTimeoutで遅延時間を設定することで解決できます。ただし、この方法はどのようにテストしても機能しません。したがって、別の解決策を見つけたほうがよいでしょう。 window.innerWidth がこの重要なタスクを引き受けることができ、互換性の問題は見つかりませんでした。

以下は 2 番目のケースで、写真とテキストを含む記事タイプです。このとき必要なのは写真の横幅と携帯電話の横幅だけで、高さの制限はないので比較的簡単です。
上記の JavaScript コードを次のように変換します:

<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 の center 属性が設定されていることが前提です。記事の内容がサードパーティを直接呼び出す場合は、対応する処理ステートメントを上記の JavaScript コードに追加できます。