スマホで制作したページを開くと拡大された状態で表示される

Question

実現したいこと

• スマホでページを開いたとき、100%表示させたい

前提

htmlとcssでウェブページを制作しました。
よく見かける画像べた張りをメインとしたのLPです。

PCでは問題なく表示されますが、スマホだとページを開いたときに150％くらいの拡大率で表示されてしまいます。
ピンチイン、ピンチアウトができるので、正常な表示に戻すことはできます。
ですが、開いたときに一番最初に見るページが崩れているように見えるのはよくないので直したいです。

ページはimgタグで画像を順番に表示させていて、必要な箇所にjqueryでスライドを読み込み、youtubeの埋め込みがされているページです。

画像はすべて700pxで書き出しております。

発生している問題・エラーメッセージ

該当のソースコード

<div class="wrapper">
  <div class="main">
    <div class="main_container">
      <img src="#" alt="">
      <img src="#" alt="">
    </div>
  </div>
  <div class="movie">
    <div class="movie_container">
      <ul class="slider">
        <li>
          <video src="#" controls class="video1"></video>
        </li>
        <li>
          <video src="#" controls class="video1"></video>
        </li>
      </ul>
    </div>
  </div>
  <div class="howto">
    <div class="howto_container">
      <iframe width="700" height="315" src="#" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>
  </div>
</div>

html {
    scroll-behavior: smooth;
}
.wrapper {
    width: 700px;
    margin: 0 auto;
    /*	background-color: aqua;*/
}


/*  movie  */
.movie {
    text-align: center;
    margin: 0 auto;
}
.slider img, .sliderBox iframe {
    width: 100%;
    height: auto;
}
.video1 {
    width: 85.71%;
}
.slick-slide li {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.slick-slide iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.slick-dots li button:before {
    font-size: 30px !important;
}
.slick-dots li {
    width: 30px !important;
}

/*  how to  */
.howto_container {
    text-align: center;
    background: #f8f8f3;
}
.howto_container iframe {
    width: 85.71%;
}

<script>
	//slickの設定
$('.slider').slick({
    dots:true, //ドットインジケーターを表示
    lazyLoad:"progressive", //画像の遅延読み込み
    arrows:false, //スライドの左右の矢印ボタンを非表示
　 　cssEase:"cubic-bezier(0.9, 0.03, 0.4, 0.9)"　//CSS3アニメーションイージングを設定
});</script>

試したこと

HTMLでビューポートの設定はしております。
メディアクエリはスマホとPC同じデザインだからと思って設定しておりません。
@media screen and (max-width: 520px) {
width:100%
}
上記で試しましたが解決しませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[tabuu]

wrapperのwidthを700pxではなく100%に変更してスマホサイズで見るとどのようになりますか。

[kana_kana_0825]

pcで見たときに全画面になってしまいます、、、
pcで見たときは横幅を700pxに固定して中央寄せにしたいと考えています。

Answer 1

下記のようにすれば最大700pxになります。細部は調整してください。

.wrapper {
    width: 700px;

　　　↓↓↓

.wrapper {
    max-width: 700px;
    width: 100%;

Comments

[kana_kana_0825]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。