スマートフォンで閲覧時、PCサイトの表示が反映されてしまいます。

Question

レスポンシブサイトを制作している初心者です。

flexboxを使って2分割画面のページを作り、スマホでは縦、PCでは横に、というのが理想です。
PCで横、PCのウィンドウを縮めた時は縦に思い通りのデザインになるのですが、
実際にスマホで見てみるとPCの表示がそのまま縮小されてしまいます。
metaタグがいけないのかと思い、あれこれ試行錯誤はしているのですが前に進めません。
以下現状のhtmlとcssです。

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


  <div class="wrapper">
    <div class="column left">
      <div class="info">
        <h1></h1>
        <p>------------</p>


      <div class="mb"><a href="#p-menu">MENU</a>
    </div></div>
    </div>
    <div class="column right" id="p-menu">
      <div class="mainmenu">
        <a class="menu" href="#about"></a>
        <a class="menu" href="#"></a>
        <a class="menu" href="#"></a>
        <a class="menu" href="#"></a><br>
        <a class="menu" href="#"></a>
        <a class="menu" href="#"></a>
        <a class="menu" href="#"></a>
        <a class="menu" href="#"></a>
      </div>
    </div>
  </div>

.column {
    height: 100vh;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

  .mainmenu{
    border-top: 3px solid white;
    border-bottom: 3px solid white;
  }

  .menu{
    padding: 10px;
  }



.left {
    background: url(../img/2.jpg) no-repeat top center;
    background-size: cover;
    color: rgba(255,255,255,.8);
}
.right {
    background-color: black;
    background-size: cover;
    color: rgba(0,0,0,.8);
}


@media all and (min-width: 500px) {
  .wrapper {
    display: flex;
  }
}

PCで見た時のデザインは思い通りになっているだけに悔しいです。
拙い説明で申し訳ありませんが、どなたかご教示頂けると幸いです。

Comments

[m.ts10806]

mediaで使ってる500pxは何を基準にされたのでしょうか

[退会済みユーザー]

スプリットデザインの紹介をされているサイト様のcssを参考にしました。

[yoshinavi]

metaタグの記述位置はどうなっていますか？　また、mediaタイプを「all」→「screen」ではどうですか？

[退会済みユーザー]

screenにしたら思い通りの表示になりました！！ありがとうございます！！

[yoshinavi]

同様の問題で悩んでいる方への指針にもなりますので、自己回答でベストアンサーにしてください。

[退会済みユーザー]

本当にありがとうございました！！

Answer 1

確認されたiphoneのシリーズが分かりませんが
chromeDevTools等で、検証したiphoneと同じサイズにして確認してみるのがいいと思います。
スマホと同じになればメディアクエリ調整が必要ですし、
期待している画面と同じになるならばそれ以外の調整が必要です。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
DevToolで縮めたときは思い通りの画面になります。
iphone,Andloidで確認するとPCの画面がそのまま縮小されてる状態です…

Answer 2

検証してないので適当な回答になってしまいますが、
min-widthの値をいろいろ変えてみるのはどうでしょう。

機種によりますが、iPhoneなんかのRetina環境だと通常よりもピクセル数が多く、結果として画面サイズが通常より大きくより圧縮されてる場合もあります。

間違えていたらすいません。

こんなのも参考にするといいかもしれません。
https://www.seojuku.com/blog/responsive-mediaquery.html

Comments

[退会済みユーザー]

ご回答ありがとうございます。
やはりmin-widthの値がおかしいのかなと思ったのですが、試してもダメでした…
参考になるサイトのご紹介ありがとうございます！ぱっと見た感じ難しそうでしたが、頑張って理解します！

[Tololololo]

それでもダメであれば
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
viewportをhtmlヘッダーに書き込んでみるといいかもしれません。

[退会済みユーザー]

ありがとうございます！皆様からのアドバイスで解決しました。

Answer 3

@media all and (min-width: 500px) の部分を@media screen and (min-width: 600px)にすることで、スマホで表示されたときに縦並びになりました。
皆様ご回答誠にありがとうございました。

Comments

[m.ts10806]

コメントで「screenで」と書かれているのでそれも含めて具体的に書かれた方が良いです。
この内容だと何がどう適切でなかったのかどう解決したのかわかりませんので

[退会済みユーザー]

ご指摘ありがとうございます！すぐに訂正致します。