html - モバイル用の html、ページのサイズが変更され、ページの読み込み後にスクロールが表示される

Question

モバイルでも機能するように、レスポンシブ Web サイトを作成しようとしています。私の問題は、携帯電話でサイトにアクセスしようとしているときに、ページが読み込まれるまで問題ないように見えます。その後、ページのサイズが変更されて大きくなり、幅と高さの両方でスクロールが表示されます。

画面のサイズに合わせるために追加できるものはありますか？よろしくお願いします、ダニエル！

Answer 1

ソースコードがないと、ウェブサイトが画面に収まらない理由を知ることができません。CSSで次のようなものを見てみてください

@media (max-width: 640px) {
  body {
    width: 100%;
  }
}

alsacreationsからのより多くのcssスタイル

@media (max-width: 640px) {

 /* passer tous les éléments de largeur fixe en largeur automatique */
 body, element1, element2 {
   width: auto;
   margin: auto;
   padding: auto;
 }

 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 100%;
 }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* passage à la ligne forcé */
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
 }
 code, pre, samp {
   white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }

 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
 element1, element2 {
   float: none !important;
   width: auto !important
 }

 /* masquer les éléments superflus */
 .hide_mobile {
   display: none !important;
 }

 /* Un message personnalisé */
 body:before {
   content: "Version mobile du site";
   display: block;
   color: #777;
   text-align: center;
   font-style: italic;
 }
}

Answer 2

ページ幅を 100% に設定してみてください

ボディ{ 幅:100%; }