@mediaを使ってウェブサイトに2種類のスタイルを設定しようとしました。しかし、電話やコンピュータを使用していても、常にデスクトップビューが読み込まれます。モバイルデバイスとデスクトップデバイスを区別するためのCSS @media
/* desktop screen */
@media (min-width: 801px){
content desktop
}
/* mobile screen */
@media (max-width: 800px){
content mobile
}
どうしたのですか？
（フルCSSがolli.mlである）
そして<head></head>
<meta content="width=device-width" name="viewport" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
事はCSSメディアクエリは機能しませ機器を区別しています。したがって、参照したいデバイスに対応するフィーチャーを見つけようとすることができます。 this siteには、iPhone、iPad用のメディアクエリがあります。だから、例えば：肖像画で
iPhone 6 &風景：
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
これらのクエリは、その機能を使用して特定のデバイスに到達するためにケースを削減してみてください。 this siteには、特定のデバイス用の定義済みクエリがあります。
しかし、the difference between Desktop and Mobileはそれほど明白ではないかもしれません。
にしてメタを追加することを忘れないでください、あなたの質問への実際の答えは：あなたはwidthとdevice-width間違っを使用しています。ライン＃169に変更します。
@media (max-device-width: 800px){
に：
@media (max-width: 800px){
あなたは、特に携帯電話をターゲットにしたい場合は、そのようなbootstrapやfoundationなどの人気のフレームワークで使用されるメディアクエリを見て良いアイデアです。あなたのコードでは800pxではなく、320pxまたは480pxのように、はるかに小さいサイズのものをターゲットにすることが多くあります。
これは違いがありましたが、今ではウェブサイトでは360px幅の携帯電話があると考えています。 CSSは今では動作しますが、ウェブサイトは私の携帯電話にとって大きなものになっています。私ができることはありますか？ – Progaros
使用しないでください： "maximum-scale = 1.0"。あなたがするたびに、赤ちゃんペンギンが死ぬ... – jBoive