HTMLでmax-minを設定し、CSSをPCとPHONEで分けたいのですが、機能しません

下記のコードで、画面幅767以上でPC用CSS,以下で携帯用CSSと連携しております。

PCで画面調整のときは作動しますが、android　chromeで、CSS３は非対応なのか、androidで立ち上げると、画面幅が大きいので表示されてしまいます。

ユーザーエージェント判定を用いたCSS指定の方がいいのでしょうか？

html
1    <meta charset="UTF-8">
2
3   <link rel="stylesheet" href="styles-phone.css" media="screen and (max-width: 767px)">
4   <link rel="stylesheet" href="styles.css" media="screen and (min-width: 768px)">
5
6

とても、限定的な質問ですので、検索でもひっかからずに、ここで質問しました。

行動規範の内容に同意します

回答1件

ベストアンサー

<meta name="viewport">は書きましたか？

これを書かない場合、モバイルではパソコン版を縮小して表示するような処理になります。

投稿2020/11/12 10:54

maisumakun

総合スコア145208

unkochon

2020/11/12 14:17

ありがとうございます。媒体の幅に合わせてくれるのですね。調べてみて、面白いと思いました。ただレイアウトが複雑で、この方法では、携帯で綺麗に表示できませんでした。 cssを切り替えて調整したいです。

maisumakun

2020/11/12 14:22

> cssを切り替えて調整したいです。でしたら、メディアクエリ以外の方法で切り替えてください。回答に書いたように、<meta name="viewport">なしでは、CSS処理での画面幅は、モバイルでも980pxとみなされるので、パソコン用のCSSしか適用されません。

unkochon

2020/11/12 14:25

そうゆうことでしたか！初心者で、勘違いしてました。やってみますね。

unkochon

2020/11/12 14:28

今、できました！！！！！！cssが適用されてました！！！！ありがとうございます！！！！！

unkochon

2020/11/12 14:29

ちなみにコードは、　下記のように変更しました <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="styles-phone.css" media="screen and (max-width: 767px)"> <link rel="stylesheet" href="styles.css" media="screen and (min-width: 768px)">

行動規範の内容に同意します