2013-08-16 14 views
5

iOS(SafariとChrome for iOSの両方)に問題が発生しています。ユーザーがページをズームすると、javascriptを使用して配置されているコンテンツの一部が乱れているようなサイズ変更が発生しているようです(サイズ変更のJavaScriptイベントが数十回トリガーされています)。私はあまりにも多くの時間と呼ばれているので、私は最後のいずれかを知る方法がないので、サイズ変更イベントをバインドすることでそれを修正することはできません。ズーム時のiOSのサイズ変更ページ

私は幸運(幅、初期スケール、最大スケール、最小スケール)なしでビューポートに多くのオプションを設定しようとしました。

私は1つの固定位置divを、固定された上、右、左、上に固定します。その中にいくつかの絶対divがあり、サイズと位置が%で設定されています。

ズームインした後にズームアウトすると、画面の左右に空いている境界線が表示されるので、ページが実際にサイズを変更しているようです。私はこれが起こらないようにしたい。

+0

ご覧いただけるコードはありますか? –

+0

@ Jean-Paulコードが大きすぎてここに投稿できません。私はそれを複製しようとすることができますが、私はそれをホストする場所がありません(jsのフィドルはiPad上で動作しません)。しかし、私はそれを複製することができるだろうと思う。私は誰かがこの問題に遭遇したことを期待していました。私はこれを引き起こしているランダムなCSSルールかもしれないと信じています。私はtwitterブートストラップを使用しています。 – Hoffmann

+0

DropboxでHTMLページを無料でホストできます。パブリックフォルダ内にindex.htmlとそれに関連するJavascript/CSSを配置し、右クリックしてパブリックURLを取得します。 – BausTheBig

答えて

2

私はこの問題を発見しました。ページのサイズが変更されていない、固定された要素が配置されていた。私が見つけた唯一の解決策は、すべての固定位置を絶対位置(私の場合は痛みになる)に変更することです。

また、resizeイベントがウィンドウにバインドされているため、ズーム時にビューが変更され、サイズ変更機能がトリガされることもわかりました。他の要素のサイズ変更イベントdoes not work(私の場合、実際に必要なのは本体のサイズ変更を見ることです)。

+0

解決策を見つけてうれしいです!しかし、コードを投稿することなく誰かが手助けすることが非常に難しくなったと言わざるを得ない。次回は、私たちが噛むためのコードを掲載しています。 ;) –

+0

ええ、申し訳ありません。コードが本当に大きくて、何が間違っているのか分からなかっただけです。固定CSS自体ではなくランダムなCSSルールに関連していると思いました。私のCSSは大きすぎてここに置くことはできませんでした(そして、それに付随するjavascriptなしでは意味がありません)。 – Hoffmann

0

iOS Safari/Chromeの初期バージョンであっても、その性質の問題は認識していません。どのiOSバージョンをお使いですか? OSXにアクセスできない場合は、iOS Simulatorで利用できるすべてのiOSバージョンでSafariをテストしましたか?あなたはiPadで同じ動作をしますか?小さなビューポートで他のブラウザをテストしましたか?あなたは何度も呼ばれているサイズ変更イベントについて何か言及します。

私は、次のコードで動作するように簡単なスタイルとなしJavaScriptを使用して簡単なHTMLページを取得しよう:ことがない場合は...

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

は、上記のコードは不可能ズームにする必要があります簡単な設定で作業すると、あなたがテストしているiOSバージョンではよく知られていないバグがあります。

一方、それがうまくいくと、コードにviewportタグをオーバーライドするものがあります。

+0

私はすでに問題を発見した、私の答えを確認することができます。ビューポートには関係しませんでした。私はズームを無効にしたくないので、私は固定された配置された要素がズームの影響を受けないようにしたい。しかしこれは可能ではないようです。 – Hoffmann

関連する問題