web-dev-qa-db-ja.com

ビューポートメタタグを使用したモバイルWebコンテンツのスケールフィット

モバイルビューポートメタタグを活用して、HTMLページのコンテンツを自動的にズームしてWebビューに合わせる方法を見つけようとしています。

制約：

  • HTMLには、固定サイズの要素がある場合とない場合があります（ex imgの固定幅は640です）。言い換えれば、コンテンツを流動的にし、％を使用することを強制したくありません。
  • WebViewのサイズがわからない、アスペクト比がわかるだけ

たとえば、単一の画像（640x100px）がある場合、webviewが300x250（縮小して収まる）の場合、画像を縮小します。一方、webviewが1280x200の場合、画像をズームインしてwebviewを塗りつぶします（収まるように拡大します）。

ビューポートで Android docs および iOS docs を読んだ後、それは簡単なようです：私はコンテンツの幅を知っているので（640）ビューポートの幅を640に設定し、ウェブビューに合わせてコンテンツを拡大または縮小する必要があるかどうかをウェブビューに決定させます。

Android/iPhoneブラウザーに次を入力すると、OR 320x50のWebビュー、幅に合わせて画像がズームアウトされません。画像を左右にスクロールできます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test Viewport</title>
    <meta name="viewport" content="width=640" />
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      vertical-align: top;
    }

    h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td 
    {
      margin: 0;
      padding: 0;
      border: 0;
      font-weight: normal;
      font-style: normal;
      font-size: 100%;
      line-height: 1;
      font-family: inherit;
      vertical-align: top;
    }       
    </style>
  </head>
  <body>
    <img src="http://www.dmacktyres.com/img/head_car_tyres.jpg">
  </body>
</html>

ここで何が間違っていますか？ビューポートメタタグは、<webviewエリアのコンテンツのみを拡大しますか？

androidiphoneiosmobileviewport
33
rynop

頭にこれを追加

//Include jQuery
<meta id="Viewport" name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<script type="text/javascript">
$(function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
  var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
  var mw = 480; // min width of site
  var ratio =  ww / mw; //calculate ratio
  if( ww < mw){ //smaller than minimum size
   $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
  }else{ //regular size
   $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
  }
}
});
</script>
55
Bren1818

これはあなたの役に立つと思います。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

動作するかどうか教えてください。

P/s：標準デバイスのメディアクエリを次に示します。 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

21
Daniel Ta

Android=にはターゲット密度タグが追加されています。

target-densitydpi=device-dpi

したがって、コードは次のようになります

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0, maximum-scale=1, user-scalable=yes" />

この追加はAndroid（ただし、答えがあるので、これは良い追加だと感じました）のみを対象としていますが、これはshouldで動作します）ほとんどのモバイルデバイス用。

8
Dave

oK

<meta id="viewport" name="viewport">

<script type="text/javascript">
//mobile viewport hack
(function(){

  function apply_viewport(){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)   ) {

      var ww = window.screen.width;
      var mw = 800; // min width of site
      var ratio =  ww / mw; //calculate ratio
      var viewport_meta_tag = document.getElementById('viewport');
      if( ww < mw){ //smaller than minimum size
        viewport_meta_tag.setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + mw);
      }
      else { //regular size
        viewport_meta_tag.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + ww);
      }
    }
  }

  //ok, i need to update viewport scale if screen dimentions changed
  window.addEventListener('resize', function(){
    apply_viewport();
  });

  apply_viewport();

}());
</script>
8
saike

style="width:100%;max-width:640px"を画像タグに追加すると、ビューポートの幅に合わせて拡大されます。つまり、大きなウィンドウでは固定幅になります。

2
Axel

Style = "width：100％;"を追加してみてくださいimgタグに。そうすることで、画像はページの幅全体に表示され、画像がビューポートよりも大きい場合は縮小されます。

0
AlexanderZ

私はあなたと同じ問題を抱えていましたが、私の懸念はリストビューでした。リストビューの固定ヘッダーをスクロールしようとすると、少しスクロールされます。問題はリストビューの高さがビューポート（ブラウザ）の高さよりも小さいビューポートの高さをコンテンツタグ（コンテンツタグ内のリストビュー）の高さより低くするだけです。これが私のメタタグです。

<meta name="viewport" content="width=device-width,height=90%,  user-scalable = no">

これが役立つことを願っています。

0
shalin