モバイルサファリ：デバイスの回転は、ウェブサイト

Question

の悪いスケーリングは、私はこれがある限り、サイトは横長モードであるとして、正常に動作します私は

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

とズームのユーザーを無効にiPhoneとiPad用のモバイルウェブサイトを持ってしまいます。ウェブサイトの幅はまさに画面の幅です。 次に、デバイスをポートレートモードにすると、デバイスは新しい（より短い）幅に収まるように縮小されます。これもOKです。

しかし、私はそれを風景モードに戻すと、突然水平スクロールが可能になり、最初は無効になってからズームができないことを意味する約125％にスケーリングされます。

ランドスケープに戻ったときに100％ズームで戻すにはどうすればよいですか？

ありがとうございました！

Answer 1

は「そう

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

のように、最大​​規模と最小規模の実験をしてみてください、あなたはあなたがドンをズーム停止するmaximum-scaleとminimum-scaleを使用して...

Answer 2

探しているものを達成できるかどうかを確認しますユーザーのズーム機能を取り除くため、実際には機能しません。それは本当に悪いアイデアです。悪い目であなたのユーザーはあなたのウェブサイトがズームしないように怒っているので、他のウェブサイトは...

この関連の質問を経由して

：solutがある

/*! 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); 

：そのポストにHow do I reset the scale/zoom of a web app on an orientation change on the iPhone?

は、アンドリューAshbacherはスコットJehlによって書かれたコードへのリンクを掲載しましたイオンはIIFEにうまく包まれているので、名前空間の問題について心配する必要はありません。

あなたのスクリプトに（jQueryを使用している場合はdocument.ready()に）ドロップしてください。

が差し迫っていることを示すイベントdevicemotionのズームを無効にするすべてです。それは実際に動作し、ズームを無効にしないので、私が見た最も良い解決策です。

EDIT：このアプローチは、特にipadを斜めに持っているときは、必ずしも信頼できるとは限りません。また、私はこのイベントがgen 1のipadsに利用できるとは思わない。

Answer 3

ズームを無効にすることは悪い考えである。これは完璧な解決策ではありませんが、Webkitの向き変更に対するフォントサイズの拡大を目標にすることで、問題を最小限に抑えることができます。私はいくつかの基本的なテストや走った

body { 
    font-size: 1.5rem; 
    line-height: 2.3rem; 
    -webkit-text-size-adjust: 100%; 
} 
/* This prevents mobile Safari from freely adjusting font-size */**