3

問題を検索しても、同様の問題は見つかりませんでした。

ウェブサイト: http://davidbrownhydraulics.com (古いデザインで、私のものではありません)

正常に動作: iPhone 4/5/iPad/etc

動作しません: Android 携帯電話... Galaxy S2 およびその他の Galaxy です。（実際にAndroidフォンにロードして、どのように機能するかを確認する必要があります）

この Web サイトをテストしたときに得られるのは、そこにある必要があるレスポンシブ ビューが最初に表示されることですが、その後すぐに拡大し続けます。あたかもブラウザが永遠に、絶え間なくズームインすることを決定しているかのようです。私はそれがその問題を引き起こしている可能性がある場所を特定しようとしました.max-device-widthにスナップする必要がありますか、それともAndroid携帯を一度にターゲットにすることができますか?

誰でも私が試すことができるアイデアはありますか? 私は多くの異なる META コンテンツ タイプを試しましたが、ブレーク ポイントを変更しました (Galaxy s2 ではオフになっている可能性があると感じているか、Android のピクセル スケールが異なる) が役に立ちませんでした。

コーディングの関連セクションは次のとおりです。

頭のメタ:

<meta http-equiv="Content-Type" name="viewport" content="charset=UTF-8, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

メディア クエリ:

@media screen and (max-device-width:767px)

それに私のCSS：（それはちょうど最大デバイス幅にスナップするという考え）

html { width:100%; overflow-x:hidden; }
body { width:100%; overflow-x:hidden; }
#outer { width:100%; }
#main { width:100%; }
#header { width:100%; max-width:100%; overflow:hidden; }

事前に感謝します。Android スマートフォンにロードしてみて、感想を教えていただければ幸いです。

4

3 に答える 3

0

ビューポートを設定すると、コンテンツがデバイスの画面にどのように収まるかがブラウザに通知され、サイトがモバイル（Android、Windows、iOS）用に最適化されていることがブラウザに通知されます。ブラウザにビューポートを初期スケールでデバイスの幅に設定するように指示します。 1の。

これを試して。

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

これは、すべてのビューポートで完全に機能します。

于 2013-02-27T19:36:37.677 に答える
0

その理由を突き止めようとして数時間ストレスを感じた後、私は、Android が CSS でそれを取得するために必要なのがこれであることに気付きました。

@media screen

ビュー ポイントを取得しません。に変更しました

@media all

そして正常に動作します:) gah! シンプルなこと...

于 2013-02-27T23:31:39.833 に答える
0

CSS メディア クエリを調整しました (必要に応じてソースを参照してください) が、このコーディングの主要部分が役立ちました。すべてに 100% の幅を設定しようとすると、何かが爆発し、Android がおかしくなったようです。

これを私のcssブレークポイントの下に置くこと（そしてこれが誰かを助けるならば、あなた自身のニーズに合わせてそれを変更すること）は助けになり、ウェブサイトを閲覧できるように保ちました. 良い迅速な修正。

html { width:100%; overflow-x:hidden; max-width:480px !important; }
body { width:100%; overflow-x:hidden; max-width:480px!important; }
img { max-width:480px !important;}
于 2013-02-28T01:11:23.243 に答える