回転を適切に処理するiPhoneのビューポートメタを設定する方法

StackOverflow https://stackoverflow.com/questions/1230019

  •  22-07-2019
  •  | 
  •  

質問

だから私は使用しています：

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

iPhoneでHTMLコンテンツをきれいに表示するには。ユーザーまではうまくいきます デバイスを横向きモードに回転します。このモードでは、ディスプレイは320ピクセルに制限されたままになります。

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

役に立ちましたか？

解決

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

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

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

他のヒント

まだ興味のある方へ：

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が入っています。

あなたがそれを助けることができるなら、あなたはユーザースケーリングオプションを失いたくありません。 こちらからこのJSソリューションが好きです。

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

クロスプラットフォームで動作するはずの少し異なるアプローチを思いつきました

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

これまでにテストしました

Samsun galaxy 2

  • Samsung galaxy s
  • Samsung galaxy s2
  • Samsung galaxy Note（ただし、cssを800pxに変更する必要がありました[以下を参照] *）
  • モトローラ

  • iPhone 4

    • @media画面および（max-width：800px）{

これは、モバイル開発の大きな前進です...

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

私はこの問題を自分で抱えており、幅を設定し、回転時に更新し、ユーザーがページをスケーリングおよびズームできるようにしたかった（現在の答えは最初を提供しますが、後者は副作用）..そのため、ビューの幅を方向に合わせて正確に保ちながら、ズームを可能にする修正を思い付きましたが、それは非常にまっすぐではありません。

まず、表示している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フレームワークからやっているのでこれはうまくいきました。

これが誰かに役立つことを願って：）

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

すべてのiPhone、すべてのiPad、すべてのAndroidをサポートします。

ただ共有したいので、レスポンシブデザインのビューポート設定をいじくり回しました。最大スケールを0.8に、初期スケールを1に、スケーラブルに設定すると、ポートレートモードで最小のビューを取得し、 iPadの風景の表示：D ...これは適切にいハックですが、うまくいくようです。なぜ使用しないのかわかりませんが、興味深い結果があります

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

お楽しみください：）

ユーザーがjavascriptで画面を回転させたときにページをリロードするだけではない理由

function doOnOrientationChange()
{
location.reload();
}

window.addEventListener('orientationchange', doOnOrientationChange);
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top