76

だから私は使ってきました：

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

HTMLコンテンツをiPhoneでうまく表示するために。ユーザーがデバイスを横向きモードに回転するまではうまく機能します。横向きモードでは、表示は320pxに制限されたままになります。

ユーザーがデバイスの向きを変更したことに応じて変更されるビューポートを指定する簡単な方法はありますか？それとも、それを処理するためにJavascriptに頼らなければなりませんか？

4

9 に答える 9

108

これを自分で解決しようとしていたところ、私が思いついた解決策は次のとおりです。

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

これにより、デバイスの向きに関係なく、デバイスが 1.0 スケールにロックされるようです。ただし、副作用として、ユーザー スケーリング (ピンチ ズームなど) を完全に無効にします。

于 2010-06-03T04:03:19.183 に答える
18

まだ興味がある人のために：

http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

ページから:

<meta name="viewport" content="user-scalable=no,width=device-width" />

これにより、ユーザーが「ピンチ」ジェスチャでページにズームインするのを防ぐように Safari に指示し、ビュー ポートの幅を、iPhone の向きに関係なく画面の幅に固定します。

于 2011-01-06T07:02:19.393 に答える
10

You don't want to lose the user scaling option if you can help it. I like this JS solution from here.

<script type="text/javascript">
(function(doc) {

    var addEvent = 'addEventListener',
        type = 'gesturestart',
        qsa = 'querySelectorAll',
        scales = [1, 1],
        meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

    function fix() {
        meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
        doc.removeEventListener(type, fix, true);
    }

    if ((meta = meta[meta.length - 1]) && addEvent in doc) {
        fix();
        scales = [.25, 1.6];
        doc[addEvent](type, fix, true);
    }

}(document));
</script>
于 2011-11-14T09:29:14.247 に答える
2

スケールできないように設定しているため（maximum-scale = initial-scale）、横向きモードに回転したときにスケールアップできません。maximum-scale = 1.6に設定すると、ランドスケープモードに合わせて適切にスケーリングされます。

于 2009-08-07T00:24:14.947 に答える
2

クロスプラットフォームで機能する、わずかに異なるアプローチを思いつきました

http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/

これまでのところ、私はでテストしました

サムスンギャラクシー2

  • サムスンギャラクシーs
  • サムスンギャラクシーs2
  • Samsung Galaxy Note (ただし、css を 800px に変更する必要がありました [下記参照]*)
  • モトローラ

  • iphone 4

    • @media screen and (max-width:800px) {

これは、モバイル開発における大きな前進です...

于 2012-11-05T11:45:11.183 に答える
1

私は自分でこの問題を抱えていました。幅を設定し、回転時に更新して、ユーザーがページを拡大縮小およびズームできるようにしたかったのです（現在の回答は最初のものを提供しますが、副作用として後者を防ぎます..そのため、ビューの幅を向きに合わせて正しく保ちながら、ズームを可能にする修正を思いつきましたが、それは非常に簡単ではありません。

まず、表示している Web ページに次の Javascript を追加します。

 <script type='text/javascript'>
 function setViewPortWidth(width) {
  var metatags = document.getElementsByTagName('meta');
  for(cnt = 0; cnt < metatags.length; cnt++) { 
   var element = metatags[cnt];
   if(element.getAttribute('name') == 'viewport') {

    element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
    document.body.style['max-width'] = width+'px';
   }
  }
 }
 </script>

次に、 - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation メソッドに以下を追加します。

float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;

stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];

if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)

// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];

ビューポータルのコンテンツ設定をさらに変更することで、追加の微調整を行うことができます。

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags .htm

また、onresize などの JS リスナーを配置して再スケーリングをトリガーできることも理解していますが、Cocoa Touch UI フレームワークから実行しているので、これはうまくいきました。

これが誰かを助けることを願っています:)

于 2011-03-15T00:39:38.120 に答える
-1

共有したいだけです。レスポンシブ デザインのビューポート設定をいじってみました。最大スケールを 0.8 に設定し、初期スケールを 1 に、スケーラブルを no に設定すると、ポートレート モードと iPad ビューで最小のビューが得られます。ランドスケープの場合:D ...これは適切に醜いハックですが、機能しているようです。理由がわからないので使用しませんが、興味深い結果が得られます

<meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" />

楽しい ：）

于 2013-04-01T14:33:18.120 に答える