Q&A
"p"iewport は絶対に反映されないのでは
前提・実現したいこと
viewportを反映すること。
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
htmlの<head>の中でviewportを反映させる下記のコードを打ち込んだのですが、クロームで開いても反映されていませんでした。本当は結果として添付している写真のようになるらしいのですが、これはパソコン上で見ているのではなくスマホなどでみてこの写真の画面になっているということなのでしょうか？
もしそうならばパソコン上でスマホの画面のように見るやり方を教えて頂きたいです。
初めてなので拙い文章ですみません。![イメージ説明]
る問題・エラーメッセージ
エラーメッセージ```ここに言語を入力![イメージ説明] コード
### 該当のソースコード <meta name=”viewport” content=”width=device-width,initial-scale=1.0> ```ここに言語名を入力 ソースコード
試したこと
ここに問題に対して試したことを記載してください。
パソコン上で見るから反映されないと思ったので、スマホでみようと試みたのですがラインでファイルをzip形式で送り、開いたのですがHTMLのコード部分しか表示されませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
似ていますが、文字が違います。
「”」→「"」
<meta name=”viewport” content=”width=device-width,initial-scale=1.0>
↓以下のように書き換えてみてください。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
追記:
直接は関係なさそうですが<link>は<head>の中に加えるのが一般的です。
追記:
こちらも直接は関係ないですが、タイプミスです。
誤: type="image/pmg"
正: type="image/png"
もしそうならばパソコン上でスマホの画面のように見るやり方を教えて頂きたいです。
「@media CSS」「CSS レスポンシブ」などで検索すると、やりかたを見つけられると思います。
CSSの記述としては例えば以下です。
CSS
1/* 画面幅が480px以下のときに以下のCSSが適用される */ 2@media screen and (max-width: 480px) { 3 body { 4 background: #f00; /* 画面幅480px以下のときは背景を赤にする */ 5 } 6 .sidebar { 7 display: none; /* 画面幅480px以下のときは.sidebarを非表示にする */ 8 } 9}
投稿2020/03/22 15:44
編集2020/03/23 00:37
総合スコア4528
しっかりと記述してみたのですが、変化がありませんでした。
下記のものがhead内に入っているコードです。記述の順番が違うなどでしょうか？
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" type="image/pmg" href="images/favicon.png">
<meta charset="UTF-8">
<title>WCB Cafe-News</title>
<meta name="description" content="猫の好きなもの">
記述の順番は、あまり関係がないです。
2〜3サイトほど、デザインやソースコードがきっちりしていそうなサイトを参考にしてみるとよさそうに思えます。
↓2〜3サイトからコピーしてきました
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
> 本当は結果として添付している写真のようになるらしいのですが、これはパソコン上で見ているのではなくスマホなどでみてこの写真の画面になっているということなのでしょうか？
おそらくパソコンで見ているのだと思います。
ただし、画面幅はスマホサイズ (横幅375pxなど) にしていると思います。
現状どのように表示されてしまっているのか、どこがうまくいっていないのか、という
画像のキャプチャがほしいです。
あとソースコードは画像でなく文字としてもらえると、回答しやすくなると思います。
その際は↓のように記述するとソースコードがきれいに表示されます。
```
ソースコード
```
追記にあったようにhead内にいれましたが変わらないです。
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" type="image/pmg" href="images/favicon.png">
<meta charset="UTF-8">
<title>WCB Cafe-News</title>
<meta name="description" content="猫の好きなもの">
以下、CSSに追記し、画面幅を可能な限り狭めてください。背景色が赤になりますか?
@media screen and (max-width: 480px) {
body {
background: #f00;
}
サイドバー {
display: none; など
}
PCでは横並びだけどスマホでは縦並びにしたい要素 {
}
}
もし赤になったのなら、
この場所に、スマホ表示のときにやりたいことを記述していってください。
(もとのCSSソースコードがわからないので、以下の記述は勘です。あまり参考にならないと思いますが..)
@media screen and (max-width: 480px) {
body {
background: #f00;
}
h1 {
font-size: 16px; /* スマホでは文字を小さく */
}
PCでは横並びだけどスマホでは縦並びにしたい要素 {
float: none;
}
PCでは横並びだけどスマホでは縦並びにしたい要素の親要素 {
display: block;
}
}
(コメントだとインデントがなくなってしまうので、回答にも追加しました。)
パソコン上で表示される画像を追加しました。
記述されているｃｓｓを打ち込みましたが変化があるませんでした。
また記載してくださった、サンプルコードも打ち込みましたが変化がなかったです。（追加した画像の画面のままです）
＞画面幅はスマホサイズ (横幅375pxなど) にしていると思います。
これはコードを打ち込んで画面幅を変えているのでしょうか？もしくはクロームの表示設定などでしょうか。
クロームの設定であれば教えてもらえないでしょうか。
> > 画面幅はスマホサイズ (横幅375pxなど) にしていると思います。
> これはコードを打ち込んで画面幅を変えているのでしょうか？もしくはクロームの表示設定などでしょうか。
> クロームの設定であれば教えてもらえないでしょうか。
難しい話ではなく、Chromeのウィンドウの幅を狭める、という意味です。
普段、Chromeに限らず、ソフトのウィンドウの幅を小さくしたり大きくしたりしていると思います。
ウィンドウサイズは狭められる限界があったように思います。
デベロッパーツールを使えばかなりの幅まで狭められますし、デバイスの切り替えのようなこともできます。参考まで。
https://www.asobou.co.jp/blog/web/gcd-check
new1ro様、dit.様、本来ここで返信すべきかどうかわからないのですが、お二方の助言でうまく反映しておりました。親身になってくださり本当にありがとうございました。
あなたの回答
tips
プレビュー
