JavaScript / onorientationchangeを使用してiPhoneのSafariのスケール/幅/ズームをリセットする

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

質問

bodyタグのonorientationchange呼び出しを使用してユーザーがどのように携帯電話を保持しているかに応じて、異なるコンテンツを表示しています。これは非常に効果的です。1つのdivを非表示にし、他のdivを表示します。

ポートレートモードでのdivは、最初の読み込み時に見栄えがします。私はこれを使用して正しいスケール/ズームを取得します：

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

ポートレートモードのコンテンツがオーバーランしても、幅は正しく、ユーザーは下にスクロールできます。横向きモードでの表示も完璧です。ただし、横向きモードのコンテンツでユーザーが下にスクロールする必要がある場合、ユーザーが縦向きモードに戻ると、画面は<！> quot;ズームアウト<！> quot;いわば。これは、横向きモードでユーザーが下にスクロールしたかどうかにかかわらず発生します。

画面のスケール/ズーム/幅を正しくするためにさまざまなことを試しましたが、運はありません。これを行う方法はありますか？

事前に感謝します！

役に立ちましたか？

解決

これは、メディアクエリのズームを処理するために使用するものです。

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

最大規模は、私のためにそれを売ったものです。つまり、iPhoneでのポートレートからランドスケープへの移行は、ズームの問題がまったくなく、非常にスムーズです...

他のヒント

<！> quot; answer <！> quot;上記で受け入れられた回答は、IEユーザーに別のブラウザへの切り替えを要求するのと同じくらい悪いので、実際には答えではありません。アクセシビリティにとってひどいです。 Appleがビューの向きを切り替える際に理想的と判断したファンキーなズームを行わないように設計したいが、障害のあるユーザーをほこりにさらしている。強くお勧めしません。

メディアクエリまたはjsフック（screen.widthなど）を使用して、向きの変更時にデザインを自動的に調整してください。これらの属性が開発者として私たちに公開される理由です。

コンテンツがビューポートよりも大きいと、ズームレベルが横から縦に変わる問題がありました。 <！> quot; minimum-scale = 1.0 <！> quot;を設定して、これを解決しました。

これは、safariでWebアプリを実行している場合は機能しませんが、自分のアプリ内でUIWebViewを使用している場合は機能すると思います。

これをテストしたことはありませんが、WebビューのズームなどにアクセスできるコードのObjective-C側とJavaScriptを通信させる簡単な方法があります。

この問題もありました。 <！> quot; maximum-scale = 1.0 <！> quot;ビューポートタグで（および<！> quot; minumum-scale = 1.0 <！> quot;気になる場合）。 これは、ユーザーがスケールできるようにしたくないことを前提としています（私はそうしていません）

これにメタタグを使用しても機能しません。可能な限りメタタグとorientationchangeおよびgesturechangeイベントの組み合わせを試しました。タイムアウトとあらゆる種類の派手なjavascriptを試しましたが、これが見つかりました。 https://github.com/scottjehl/iOS-Orientationchange-Fix

関連する質問： iPhoneの向きの変更でWebアプリのスケール/ズームをリセットするにはどうすればよいですか

その投稿で、Andrew AshbacherはScott Jehlによって書かれたコードへのリンクを投稿しました：

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

それは、 IIFE 名前空間の問題を心配する必要はありません。

スクリプト（jQueryを使用している場合はdocument.ready()にではなく）とビオラにドロップしてください！

devicemotionが差し迫っていることを示す<=>イベントのズームを無効にするだけです。それは実際に動作し、ズームを無効にしないため、私が見た中で最高のソリューションです。

編集：このアプローチは、特にipadを斜めに持っている場合、常に信頼できるとは限りません。また、このイベントは第1世代のiPadでは利用できないと思います

コンテンツ属性でuser-scalableプロパティを設定できます。これを試してください：

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;">

からこの答え：

  

ただし、User-scalable = noを割り当てた場合、ウェブサイトがズームインまたはズームアウトできないことを意味します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top