レスポンシブデザイン　スマホ側のcssが反応ていないぽい。。

レスポンシブデザイン　スマホ側のcssが反応ていないぽいです。。

解決策がわからないので助けてください。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>DISH</title>
<link rel="stylesheet" href="kij.css">
<meta name="description" content="dishweb">
<link rel="stylesheet" media="(min-width:768px)" href="CSS/screen.css">
<link rel="stylesheet" media="(max-width:500px)" href="CSS/sm.css">
<body>
<div class="content">
<a href="https://dish-on.stores.jp"><img class="img" img src="image/dishh.jpg">
</div></a>
<header class="footer">
<fontface="script"><p>© 2021 DISH ,All Rights Reserved</p></header></fontface>
</body>
</html>

何が違うのかがわかりません。。。
スマートフォンCSS⇩

.body{
        box-sizing:border-box;
        display: flex;
        flex-direction: column;
    }
    
    .content{
        text-align:center;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .img{
        max-width:  360px;
        height:360px;
    }

    .footer{
        height:25px;
        text-align: center;
        margin-bottom: 0px;
        background-color:white;
        color:grey;
    }

退会済みユーザー

2021/03/22 22:38

コードはマークダウンで記述してね。 CSSはどちらのCSSなのか教えてね。

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

回答1件

ベストアンサー

スマホは画面が小さいのだけども、解像度がPC並みにあるんですよー。
おそらく500px以下と認識されていないのです。
headに次のmetaを足してあげてください。

html
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

※表示領域はデバイスの幅、標準表示倍率は1倍…という意味だと思います、くらいの認識でおｋ※

以下蛇足です。
viewportという言葉を検索してちょっと知識を足しておくと良いかも？

もう一個蛇足です。
タブレットとスマホの間は切り捨てでしょうか？
スマホの横持ちがちょうどその辺りのような？

投稿2021/03/22 22:45

退会済みユーザー

総合スコア0

sen2000

2021/03/23 02:47

ありがとうございます。解決しました。viewportを勉強します。マークダウンで記述する方法がわからずすいません。。これからもよろしくお願いします。

K_3578

2021/03/23 03:04 編集

@質問者さん MarkDownの使い方分からないそうなので下記に例示します。わかったら質問文を編集で修正してみてください。 ```言語名ソースコード ``` (HTML,CSS等複数言語のソースを貼るときはブロック間を1行空けて下さい) <code>ブロックは<code>と書いてある所押すと出てきます。ついでにヘルプもご一読ください。 https://teratail.com/help/question-tips#questionTips3-7 もう一個ついで。タイトルの「スマホ側のcssが反応ていないぽい。。」も「スマホ側のcssが反応していないぽい。。」だと思います。小さいことを気にするな、と思われたかもしれませんが、プログラムは書いた通りにしか動かないのでコードで同じように一つ脱字しただけで全く動かなくなることもあります。なのでこういうミスを減らせるようにチェックはしっかりするようにするとケアレスミスが減少します。

sen2000

2021/03/23 03:09

ありがとうございます。まさにそうです、、慣れない作業で誤字脱字が原因で2.3時間無駄にすることが多いです。

K_3578

2021/03/23 03:14

@質問者さんどういうエディタを使われているかはわかりませんが、コード補完機能であったり、文法チェックをしてくれる拡張機能が追加できるものもあるので一度探してみては。ケアレスミスで無駄に時間を浪費するのは勿体ないので。

退会済みユーザー

2021/03/23 03:55

@sen2000様 Qiitaにリンゴ製品の解像度のまとめ記事があったからなんとなく見てみても良いかもです。 https://qiita.com/tomohisaota/items/f8857d01f328e34fb551 おいらはatomというコードエディタを使っているのだけども !の後にtabキーでhtmlのテンプレっぽいのが一発で出るので重宝しております。ふぁいと～＠K_3578様いつもお世話になっておりますっ、ありがとうございます！おいらも案内テンプレ必要になるかなぁとか考えてみたり。

K_3578

2021/03/23 04:34

@amiya-seさんいえいえ、毎度でしゃばって申し訳ないです。確かむかーしの質問にテンプレ作られてた方が居てそれを参考に状況によって貼り付けて軽く改変してますね。（一個一個文章考えるのめんどくさいのです）

sen2000

2021/03/23 04:43

@amiya-se 様＠K_3578 様ありがとうございます。broketを使っていて。3日前にVScodeに移行しました。コーディング3ヶ月目なのでわからないことがたくさんあります。。。

K_3578

2021/03/23 04:50 編集

@質問者さん VScode私使ってませんけど、確かそういう拡張機能ありませんでしたっけ？首突っ込んだついでにサクッと調べてみます。追記やっぱありますよね。 https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker 240万人がインストールしてる上に評価も高いので一度入れてみては？後、amiya-seさんはともかく私は「様」なんて付けて頂くような身分じゃないので「さん」とかでいいです。

退会済みユーザー

2021/03/23 04:52

＠sen2000様 VScodeは一時期使ってたことがありますが、今はちょっと分からないですー。良さげな記事を見つけたのでご案内させていただきますです、ハイ。参考URL　Qiita　VSCode に必ず入れておきたい拡張機能 https://qiita.com/ucan-lab/items/e85931bf8276da43cc97 以下蛇足です。 40符３飜自摸とかシブイですね？確実に積み上げていく感じが素敵です。 ※分からなければスルーしてくださいｗ

退会済みユーザー

2021/03/23 04:58

@K_3578様あれ？一個飛びました。案内文はまた考えるとして… 拡張のピンポイントでのご案内ありがとうございますっ僕はまとめてプレゼントしてみました！以下蛇足です。混ざりそうなのでこの辺りで自重しておきますね～ではではっ

K_3578

2021/03/23 05:03

@amiya-seさんこれ以上は雑談チックになりそうなので私もこれにて失礼します。 >40符３飜自摸なにっ、3飜30符ではないのか･･･

退会済みユーザー

2021/03/23 05:17

＠K_3578様ふぃーっしゅ！やはりスルーはできないですよね？ｗなるほど、カン４と６９のリャンメン待ちでしたか。 ※3飜30符で合ってますよー、合ってるかどうかは反応待ちですがね ※あと２人釣れますかねー？自重しますがっ

K_3578

2021/03/23 05:24

@amiya-seさん釣られましたねえ･･･。カン4引けっ･･･！流石に内容が内容なので他の方に怒られかねないので今度こそ失礼しときます･･･。