4

モバイルファーストのウェブサイトで作業してきましたが、ChromeforiOSでメディアクエリが正しく機能していないことがわかりました。使用しているデバイスのサイズ（iPhone、iPad）や表示方向に関係なく、ページにはベースライン（モバイル）スタイルと「481px以上」のハイブリッドバージョンが表示されているようです。この問題を説明するために、スクリーンショットの小さなギャラリー（説明付き）をアップロードしました。

http://imgur.com/a/6Ee7C

このページはhttp://dev.thesmackpack.comでライブで見ることができます。CSSは、そこを突っ込んで学ぶことができるものがある場合に備えて、縮小されていません。メディアクエリは、私がテストした他のすべてのブラウザで正しく機能しました。iOS用のChromeだけがこれらの問題を引き起こしています。

編集：私がテストした他のいくつかのデバイスでは正常に動作しているようです。しかし、iPhoneとiPadでUN-breakにすることはできません。これらは私がサイトを開発しているデバイスであるため、問題は依然として問題です。

4

8 に答える 8

5

Chromeはキャッシュを手放さないように見えます。キャッシュや履歴などを削除してみました。影響はありません。アプリを再インストールし、すべての正しいスタイルをロードしました。修正すべきバグがいくつかあるようです。

于 2013-02-01T21:33:30.000 に答える
4

ビューポートメタをセミコロンで区切ってみてください

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

それが失敗した場合は、ズームを制限する必要があるかもしれません

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
于 2012-08-06T20:20:26.357 に答える
2

残念ながら、この問題は魔法のように解決したようです。Chromeの「デスクトップサイトのリクエスト」機能に何らかの形で関係しているのではないかと思いますが、私は前向きではありません。将来の問題を抱えている人のために、もっと良いアドバイスがあればいいのにと思います。

于 2012-09-17T14:27:16.040 に答える
0

これが役立つかどうかはわかりませんが、ヘッドタグのスタイルシートリンクを完全なURLにするまで、Chrome iOSではスタイルシートが半分壊れていました（ただし、試した他のすべてのブラウザとデバイスで正常に機能していました）。単なる相対ファイルパス（ "/style.css"など）ではなく、http：//www.directory/style.css"。

于 2012-09-16T06:14:52.783 に答える
0

私も同様の問題を抱えていました。@Nick Simpson-Deeksの回答は私のために働いた（スタイルシートへの完全なURLパス）。また、メディアクエリを別のスタイルシートに配置することも機能しました。

于 2013-01-24T01:10:01.633 に答える
0

この問題は、別のファイルにある@mediacssにはありません。モバイルクロームキャッシュはクレイジーで、別のシートに移動して修正したように見えたのは、クロームが新しいと思ってまだキャッシュしていないためです。

于 2013-02-01T00:29:23.010 に答える
0

あまりにも多くの@media単語をコピーして貼り付けていないかどうかを確認してください。

@media screen and (max-width: 1200px), @media screen and (max-device-width: 1200px), @media screen and (max-height: 720px), @media screen and (max-device-height: 720px){
  ...
}

@media最初は1つだけである必要があります。これは非常によくある間違いです。

于 2013-04-16T18:14:13.827 に答える
0

初めに ！ブラウザがズームなしで100％ページを表示していることを確認してください。ズームすると、すべてのメディアクエリの計算が台無しになります:)

于 2014-09-24T19:03:21.957 に答える