14

bodyタグのonorientationchange呼び出しを使用して、ユーザーが電話をどのように持っているかによって、異なるコンテンツを表示しています。これはうまく機能します-私は一方のdivを非表示にし、もう一方を表示します。

ポートレートモードのdivは、最初のロードで見栄えがします。私はこれを使用して適切なスケール/ズームを取得します：

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

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

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

前もって感謝します！

4

7 に答える 7

19

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

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

于 2011-05-17T17:03:00.797 に答える
7

メディアクエリのズームを処理するために使用するものは次のとおりです。

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

最大スケールは私のためにそれを販売したものです. これは、iPhone でのポートレートからランドスケープへの移行が、ズームの問題がまったくなく、非常にスムーズであることを意味します。

于 2011-01-04T19:12:50.243 に答える
2

コンテンツがビューポートよりも大きい場合、ズーム レベルが横向きから縦向きに変わるときに問題が発生しました。「最小スケール= 1.0」を設定すると、これが解決しました。

于 2011-03-25T11:50:21.770 に答える
1

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

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

于 2009-09-16T04:30:33.173 に答える
0

私もこの問題を抱えていたと思います。ビューポートタグに「maximum-scale=1.0」（必要に応じて「minumum-scale = 1.0」）を入れてみてください。これは、ユーザーがスケーリングできるようにしたくないことを前提としています（私はそうしません）

于 2010-03-12T01:01:12.183 に答える
0

これにメタ タグを使用しても機能しません。可能なメタタグorientationchangeとgesturechangeイベントのすべての組み合わせを試しました。タイムアウトとあらゆる種類の派手な JavaScript を試したところ、次のことがわかりました :

この関連する質問を介して: 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で適切にラップされたソリューションであるため、名前空間の問題について心配する必要はありません。

それをスクリプト ( document.ready()jQuery を使用している場合ではありません) と viola にドロップするだけです!

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

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

于 2012-06-01T22:08:56.397 に答える
0

user-scalablecontent 属性でプロパティを設定できます。これを試して：

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

この回答から：

ただし、 User-scalable=no を割り当てると、Web サイトでズームインまたはズームアウトが許可されないことを意味します。

于 2010-03-10T19:04:50.950 に答える