74294
**現象**  
Google Chromeのモバイル表示を320×568pxに設定して、そのサイズに合わせたコード（HTMLとCSS）を書いていたのですが、VS
CodeのLiveServer機能でGoogle Chromeのモバイル表示をさせると、980×1739pxの大きさになってしまいます。

[![当該画面のスクリーンショット](https://i.stack.imgur.com/PDNEp.png)](https://i.stack.imgur.com/PDNEp.png)

**期待値**  
Google Chromeのモバイル表示で、320×568pxの大きさで表示させること。

**再現手順**  
下記のコードをGoogle Chromeのモバイル表示で実行すると再現できます。CSS設計の方式は、FLOCSSです。

`index.html`

```

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="./foundation/reset.css">
        <link rel="stylesheet" href="./foundation/grid.css">
        <title>Facebook</title>
    </head>
    
    <body>
        <div class="advice">
            <i class="fas fa-mobile-alt"></i>
            <p>iPhone用Facebookで高速ブラウジング</p>
        </div>
        <div class="fbLogo">
            <img src="./img/image_0.svg" alt="某SNSのロゴ">
        </div>
        <div class="loginForm">
            <input class="telNumEmail" type="tel email">
            <div class="lineSpacing"></div>
            <input class="password" type="password">
            <div class="loginButton">
                <button type="button">ログイン</button>
            </div>
            <hr>
            <div class="signUpButton">
                <button type="button">新しいアカウントを作成</button>
            </div>
            <div class="forgotPasswordLink">
                <a href="">パスワードを忘れた場合</a>
            </div>
        </div>
        <div class="localeSelector">
            <nav class="left-nav">
                <ul>
                    <li>日本語</li>
                    <li><a href="">Português (Brasil)</a></li>
                    <li><a href="">Español</a></li>
                    <li><a href="">Deutsch</a></li>
                </ul>
            </nav>
            <nav class="right-nav">
                <ul>
                    <li><a href="">English (US)</a></li>
                    <li><a href="">中文(简体)</a></li>
                    <li></li>
                    <li></li>
                </ul>
            </nav>
        </div>
        </div>
        <footer>
            <nav class="footer-navi">
                <ol>
                    <li><a href="">Facebookについて</a></li>
                    <li>・</li>
                    <li><a href="">ヘルプ</a></li>
                    <li>・</li>
                    <li><a href="">その他</a></li>
                </ol>
            </nav>
            <small>Facebook Inc.</small>
        </footer>
    </body>
    </html>
    
```

`foundation/grid.css`

```

    /* ページ全体の設定 */
    
    body {
        display: grid;
        grid-template-columns: 16px 287px 16px;
        grid-template-rows: [advice] 48px [fbLogo] 47.42px [telNumEmail] 42px [lineSpacing] 8px [password] 44px [loginButton] 52px [separator] 18px [signUpButton] 60px [forgotPasswordLink] 54px [localeSelector] 86px [footerNav] 22px [copyright] 17px
    }
    
    
    /* パーツの配置 */
    
    .adviceArea {
        grid-column: 1 / -1;
        grid-row: advice;
    }
    
    .fbLogo {
        grid-column: 1 / -1;
        grid-row: fbLogo;
    }
    
    .telNumEmail {
        grid-column: 2 / -2;
        grid-row: telNumEmail; 
    }
    
    .lineSpacing {
        grid-column: 2 / -2;
        grid-row: lineSpacing;
    }
    
    .password {
        grid-column: 2 / -2;
        grid-row: password;
    }
    
    .loginButton {
        grid-column: 2 / -2;
        grid-row: loginButton;
    }
    
    .loginForm hr {
        grid-column: 2 / -2;
        grid-row: separator;
    }
    
    .signUpButton {
        grid-column: 2 / -2;
        grid-row: siguUpButton;
    }
    
    .forgotPasswordLink {
        grid-column: 2 / -2;
        grid-row: forgotPasswordLink;
    }
    
```

`foundation/reset.css`

```

    /* A Modern CSS Reset */
    
    *,
    *::before,
    *::after {
        box-sizing: border-box
    }
    
    body,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0
    }
    
    ul[role="list"],
    ol[role="list"] {
        list-style: none
    }
    
    html:focus-within {
        scroll-behavior: smooth
    }
    
    body {
        min-height: 100vh;
        text-rendering: optimizeSpeed;
        line-height: 1.5
    }
    
    a:not([class]) {
        text-decoration-skip-ink: auto
    }
    
    img,
    picture {
        max-width: 100%;
        display: block
    }
    
    input,
    button,
    textarea,
    select {
        font: inherit
    }
    
    @media(prefers-reduced-motion:reduce) {
        html:focus-within {
            scroll-behavior: auto
        }
        *,
        *::before,
        *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
            scroll-behavior: auto !important
        }
    }
    
```
CC BY-SA 4.0
2021-02-24T13:30:02.040
74253
2021-02-27T05:16:25.363
2021-02-26T08:50:23.070
36906
36906
question
html css
Google ChromeでHTMLとCSSをモバイル表示をさせたときの画面サイズが異常です。
ビューポートの初期サイズを `meta` タグにより設定することで問題は解決すると思います。

```

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="./foundation/reset.css">
        <link rel="stylesheet" href="./foundation/grid.css">
        <title>Facebook</title>
    </head>
    
    <body>
        <div class="advice">
            <i class="fas fa-mobile-alt"></i>
            <p>iPhone用Facebookで高速ブラウジング</p>
        </div>
        <div class="fbLogo">
            <img src="./img/image_0.svg" alt="某SNSのロゴ">
        </div>
        <div class="loginForm">
            <input class="telNumEmail" type="tel email">
            <div class="lineSpacing"></div>
            <input class="password" type="password">
            <div class="loginButton">
                <button type="button">ログイン</button>
            </div>
            <hr>
            <div class="signUpButton">
                <button type="button">新しいアカウントを作成</button>
            </div>
            <div class="forgotPasswordLink">
                <a href="">パスワードを忘れた場合</a>
            </div>
        </div>
        <div class="localeSelector">
            <nav class="left-nav">
                <ul>
                    <li>日本語</li>
                    <li><a href="">Português (Brasil)</a></li>
                    <li><a href="">Español</a></li>
                    <li><a href="">Deutsch</a></li>
                </ul>
            </nav>
            <nav class="right-nav">
                <ul>
                    <li><a href="">English (US)</a></li>
                    <li><a href="">中文(简体)</a></li>
                    <li></li>
                    <li></li>
                </ul>
            </nav>
        </div>
        </div>
        <footer>
            <nav class="footer-navi">
                <ol>
                    <li><a href="">Facebookについて</a></li>
                    <li>・</li>
                    <li><a href="">ヘルプ</a></li>
                    <li>・</li>
                    <li><a href="">その他</a></li>
                </ol>
            </nav>
            <small>Facebook Inc.</small>
        </footer>
    </body>
    </html>
    
```
CC BY-SA 4.0
2021-02-27T05:16:25.363
74294
2021-02-27T05:16:25.363
32986
74253
answer