PC版のサイトをスマホに対応させたくてviewportを書いても、chromeで 検証をすると文字が

PC版のサイトをスマホに対応させたくてviewportを書いても、chromeで
検証をすると文字がでかすぎたり小さすぎたりして結局@mediaで一つ一つcssを変えたのですが、なぜできないのでしょうか？

質問者からの補足コメント

• PC用の画面だとこうなのですが

  
    補足日時：2021/01/06 20:19

• スマホ用の画面にするとこのように文字が大きくなってしまって横にはみ出してしまうのでスマホ用に別でcssを書きました。
  viewportを指定しても指定しないときと変わりません

  
    補足日時：2021/01/06 20:21

• bootstrapはphpファイルに使用することもできますか？

    補足日時：2021/01/06 21:11

• スマホ用のcssを消してfirefoxで検証してみたら上手く表示されました！
  皆さんご回答ありがとうございました

    補足日時：2021/01/07 07:09

No.6 ベストアンサー 回答者： naokita 回答日時： 2021/01/06 22:22

#5です。

補足拝見済み

実際のスマホ実機で表示しないとわからないよ！　F12開発ツールは参考程度に・・・
実際にスマホでレンダリングするとわかるけど、細々した点が少々違うから修正点が出てくる。
iPhoneもAndroidもバグだってあるし、開発ツールにもあるから相違する。

その補足の画面を
・F5で更新したのか？
・40％って何？　何故100％じゃないのか・・・

他のデフォルトファイルを表示したり、新規で作ってみよう！どうなる？
そこにコンテンツだけを、ブチ込めば良いのです。

この回答へのお礼

検証を開くと初めに40%になっているのでこの画面で実際に表示されると思ったのですが違うんですね。
実機でやってみます！　ありがとうございます

お礼日時：2021/01/06 23:06

No.5 回答者： naokita 回答日時： 2021/01/06 17:03

CSSを変更せずに、PC版表示なら、

<meta name="viewport" content="width=1200px, user-scalable=yes">
などのように「幅指定」すると、全体像としてPC画面をスマホ版で縮小できますが、それだとPC版を縮小するだけなので、文字は小さくて（ピッチアップしないと）読めないですよ。

はい、
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
の指定が一般的なレスポンシブになります。

フォントサイズは、body{font-size:16px;}だけ指定していれば、スマホサイズでも一般的に読めるサイズですが、
CSSで、その次のセレクタや、メディアクエリで、フォントサイズを指定してしまっては、bodyの16pxは各々が独立して変化してしまいますよ・・・

-------------
おそらく貴方のCSSで余計な事をしていると思います。
例えば、p{font-size:14px;}とかね。%で指定しているとか？？
@media only screen and (max-width: 896px){
p{font-size:16px !important;}}
CSSを両用で書き換えるか、上記のように、タブレット/スマホ用にメディアクエリを利用するか。

まあ、混乱するよりも、作り直した方が早かったりしますけどね・・・

この回答へのお礼

font-size:16px;にしても補足の画像のように横がはみ出してしまいます。

お礼日時：2021/01/06 20:30

No.4 回答者： wanderer1 回答日時： 2021/01/06 12:36

スマートフォンでPC版のサイトを表示したとき、そもそもサイズ違うサイト全体をがんばって表示しようとするため、読み込み時は「とても縮小された状態のサイト」としかみることになるんですよね。

そんなことから「表示の縮尺（スケール）を、スマートフォンやPCそれぞれがもつ、本来の使いやすい表示サイズで見せてね」というのがviewportの指定です。（流れは違うかもしれませんけれど、なんかそんな感じのことです）

横幅320pxのスマートフォンで横幅960pxのPCサイトを表示したら、スケールでいうと1/3ですよね。

それは縮小しすぎだからスマートフォンでもPCでも1/1のスケールで表示してね、ということが書かれていると思っていただければ。

何も考えずにサイトを作れば、ブラウザの初期設定で決められたフォントサイズで出力されます。

それを制作者の意図によって調整するのがCSSなのですね。
スマートフォンとPCでは印象も違うし、制作者によって意図も異なるでしょう。

文字が大きすぎる、小さすぎるというのは、お書きの前提では「あくまでもPCの使用」を考えられたものです。
スマートフォンのブラウザの挙動はPCのブラウザとは違うので、気に入らなければmediaportでそれぞれのデバイスでの表示について調整するということになります。

開発者向けのお話ですが、PCでみる距離と、手で持ってみる距離では、適切な表示サイズは異なる、という前提でつくられているらしいんですよ。

ですから、他の方が書かれているように制作支援ツールを使うという手もありますよ、というお話が出てきているのだと思っていただければ。

この回答へのお礼

調べてみます。
ご回答ありがとうございました

お礼日時：2021/01/06 20:31

No.3 回答者： lv4u 回答日時： 2021/01/06 08:16

>>viewportを指定するだけじゃなくて@mediaでスマホに合わせたcssに変更していかないといけないということですか？

No.2さんの回答にあるようにBootStrapを導入して、それに従ってサイト全体の構成を再設計するようになると思います。
最新のフレームワーク、開発ツールだと、BootStrapを使うのが前提でソースを生成してくれたりするので、最初からPC用、スマホ用、タブレット用に対応するサイトを作ってくれたりします。

この回答へのお礼

調べてみます！
ご回答ありがとうございました。

お礼日時：2021/01/06 20:31

No.2 回答者： くんこば 回答日時： 2021/01/05 23:03

bootstrapを導入したら？

この回答へのお礼

ご回答ありがとうございます

お礼日時：2021/01/06 20:32

No.1 回答者： lv4u 回答日時： 2021/01/05 22:57

通常、ＰＣ版サイトとスマホ版やタブレット版サイトに対応するには、「レスポンシブデザイン」で対応させていますけどね。

この回答へのお礼

viewportを指定するだけじゃなくて@mediaでスマホに合わせたcssに変更していかないといけないということですか？

お礼日時：2021/01/05 22:59