3

次の設定を想像してください。

<meta name="viewport" content="user-scalable=yes, width=640" />

デフォルトの CSS:

body { width: 100%; }

一部の要素の CSS 変更 (これを と呼びましょうbutton-X) クリック:

body { 
    margin: 0 0 0 -webkit-calc(100% - 100px);
    min-width: 640px; 
    overflow-x: hidden; 
}

デスクトップブラウザでこれは何をしますか?

体全体をほぼ 100% 右にシフトします。水平スクロールバーが表示されません。body画面の右端に配置された の左側部分 (100px) のみが表示されます。

これは iPhone 4S iOS 6.0.1 で何をしますか?

実際には 2 つの動作があります。

  1. 不正解: Safari を実行してクリックbutton-Xすると、Web サイトが 640px ではなく 1200px で表示され始めます。シフトbodyすると、全体viewportが 630px の空白スペース + 本文の幅 = ~1200px になります。bodyhasposition: absolute;またはwhich は理論的にはビューポートの外に要素を配置できるはずですposition: fixed;が、そうではありません。iOS ではビューポートが非常に大きくなるため、画面外にあるはずの要素が画面上に表示されます。
  2. 正しい:おそらくそれがどのように機能し、変更できないため、この質問はしませんが、それに対する修正があるので、iOS のバグだと思います。Safariを実行していて、2本の指でタップして一緒に移動し（ズームアウトするなど）、クリックbutton-Xすると完全に機能します。2 本の指でタップするこのアクションは、ビューポートに何も変更しません。ビューポートは 640px に設定されているため、指を離した後も 640px のままになるため、文学的な変化はありません... しかし、この単純なアクションの後、完全に正常に動作し始めます。

問題は、このアクション (2) をプログラムで実行する方法です。私はもう試した：

  1. jQuery(window).trigger('resize');
  2. -webkit-transform-origin: 0px 0px; -webkit-transform: scale3d(1,1,1); zoom: 1;
  3. iPhone で向きが変わったときに Web アプリのスケール/ズームをリセットするにはどうすればよいですか?
  4. 興味深い: 設定してもビューポートが ~1200px になりますuser-scalable: no

これは何も変わりませんでした。基本的にoverflow: hidden;、デスクトップ ブラウザーのように、絶対配置された要素 (または を使用) をビューポートから外したいと考えています。

4

1 に答える 1

1

試しましたinitial-scale=1, maximum-scale=1, user-scalable=noか？また、あなたはそれを後方に修正しようとしていると思います。あなたがやりたいことは何ですか？ビューポートまたは DOM 要素の動作ではなく、結果の Web サイト/Web アプリケーションです。

とにかく - 一般的に、ビューポートはbody. をビューポートよりも広くして、がそれ自体をクリップbodyすることを期待するのは奇妙です。を固定にbody設定し(この方法では、必要なだけ幅を広げることができるため)、コンテナを 内に配置し、 CSS の変更をではなくに適用してみてください。bodywidthdivbodymargindivbodybodywidthoverflow-x:hidden

于 2013-01-03T18:21:02.767 に答える