質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

モニター表示の際、デバイスによってフォントサイズが変更される点を改善したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 538

score 23

コードをモニター表示した際に、13インチPCではフォントサイズが指定通りに表示されますが、
27インチ画面のchromeで表示させた時は、フォントサイズをはじめ、container幅など全体的に縮小されて
表示されます。
ただし、27インチPCでもsafariだと縮小されずに表示されました。
この縮小される点を、縮小されずに表示できるように改善したいです。

試してみたこととして、cssでのフォント設定remなどを確認してみましたが、
問題点がわかりませんでした。

以下、コードを添付しました。

ご回答いただけると、幸いです。
よろしくお願いいたします。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>タイトルが入ります</title>
        <meta name="description" content="文章が入ります文章が入ります文章が入ります">
        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lora:wght@400;600&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/responsive.css">
    </head>
    <body>
        <div id="top-wrapper">
            <div class="container">
                <img class="top-logo" src="images/index/画像画像画像.svg" alt="文章文章文章">
            </div>
        </div>
        <header>
            <div class="container header-flexbox">
                <div><a href="index.html"><img class="header-logo" src="images/index/画像画像画像.svg" alt="文章文章文章"></a></div>
                <nav>
                    <ul class="nav-main">
                        <li><a href="リンクリンクリンク.html">ダミーダミーダミー</a></li>
                        <li><a href="リンクリンクリンク.html">ダミーダミーダミー</a></li>
                        <li><a href="リンクリンクリンク.html">ダミーダミーダミー</a></li>
                        <li><a href="リンクリンクリンク.html">ダミーダミーダミー</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <article>
            <div class="container">
                <div class="message-text">
                    <h1>タイトルが入りますタイトルが入ります</h1>
                    <p>ダミーダミーダミー、</p><p>ダミーダミーダミー。</p>
                </div>
            </div>
        </article>
        <div class="activity-wrapper">
            <div class="container service">
                <div class="heading">
                    <h2>ダミーダミーダミー</h2>
                </div>
                <section class="servicearea">
                    <div class="category">
                        <div class="rect-wrap">
                            <div class="txt">
                                <h3>見出しが入ります</h3>
                                <p>
                                    テキストが入ります。テキストが入ります。テキストが入ります。
                                    テキストが入ります。テキストが入ります。テキストが入ります。
                                    テキストが入ります。テキストが入ります。テキストが入ります。
                                </p>
                            </div>
                        </div>
                        <div class="pic">
                            <img src="images/index/画像画像画像.jpg">
                        </div>
                    </div>
                    <div class="category">
                        <div class="rect-wrap">
                            <div class="txt">
                                <h3>見出しが入ります</h3>
                                <p>
                                    テキストが入ります。テキストが入ります。テキストが入ります。
                                    テキストが入ります。テキストが入ります。テキストが入ります。
                                    テキストが入ります。テキストが入ります。テキストが入ります。
                                </p>
                            </div>
                        </div>
                        <div class="pic">
                            <img src="images/index/画像画像画像.jpg">
                        </div>
                    </div>
                    <div class="category">
                        <div class="rect-wrap">
                            <div class="txt">
                                <h3>見出しが入ります</h3>
                                <p>
                                    テキストが入ります。テキストが入ります。テキストが入ります。
                                    テキストが入ります。テキストが入ります。テキストが入ります。
                                    テキストが入ります。テキストが入ります。テキストが入ります。
                                </p>
                            </div>
                        </div>
                        <div class="pic">
                            <img src="images/index/画像画像画像.jpg">
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <footer>
            <div class="container">
                <div><a href="index.html"><img class="footer-logo" src="images/index/画像画像画像.svg" alt=""></a></div>
                <p class="footer-txt">〒000-0000 ダミーダミーダミー0-0</p><p>ダミーダミーダミー:00:00-00:00|ダミーダミーダミー00:00-00:00</p><p>ダミーダミーダミー</p>
                <p class="copyright">&copy;ダミーダミーダミー 2021</p>
            </div>
        </footer>
    </body>
</html>
@charset "UTF-8";
* {
    box-sizing: border-box;
}
html {
    font-size: 100%;
}
body {
    font-family: 'Lora', serif;
    font-family: 'Noto Serif JP', serif;
}
a {
    text-decoration: none;
}
h2, h3, p {
    font-weight: normal;
}
.container {
    max-width: 1170px;
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
    padding: 0 4%;
}
#top-wrapper {
    min-height: 100vh;
    background-image: url(../../images/index/画像画像画像.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
.top-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 100;
}
header {
    height: 80px;
    width: 100%;
    background-color: #f7f7f7;
}  
.header-flexbox {
    display: flex;
    justify-content: space-between;
}
.header-logo {
    width: 55px;
    margin-top: 13px;
}
.nav-main {
    display: flex;
    list-style: none;
    margin-top: 27px;
    font-size: 1rem;
    text-transform: uppercase;
}
.nav-main li {
    margin-left: 70px;
    letter-spacing: 5px;
}
.nav-main a { 
    color: black;
    position: relative;
    display: inline-block;
}
.nav-main a::after {
    position: absolute;
    bottom: -10px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #333;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .3s;
}
.nav-main a:hover::after {
    transform-origin: left top;
    transform: scale(1, 1);
}
article {
    height: 1050px;
    background-image: url(../../images/index/画像画像画像.jpg);
    background-size: cover;
    object-fit: cover;
    display: flex;
    justify-content: center;
    padding-top: 90px;
}
.message-text {
    color: black;
    text-align: center;
}
.message-text h1 {
    font-size: 26px;
    letter-spacing: 5px;
    font-weight: bold;
    padding-bottom: 90px;
}
.message-text p {
    font-size: 14px;
    letter-spacing: 5px;
    line-height: 2.5;
    font-weight: normal;
}
.message-paddingTop {
    padding-top: 40px;
}
.heading {
    padding: 90px 0;
    text-align: center;
}
.heading h2{
    letter-spacing: 5px;
    font-size: 16px;
    font-weight: normal;
    line-height: 2.5;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    display: inline-block;
}
.category:not(:first-child) {
    margin-top: 10rem;
}
.servicearea {
    margin-top: 0px;
}
.category {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.pic {
    width: 77%;
}
.pic img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}
.rect-wrap {
    width: 33%;
    margin-right: -100px;
    z-index: 1;
}
.txt {
    padding: 1rem 2rem 2rem 2rem;
    background-color: #f7f7f7;
}
.txt h3 {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #000;
    line-height: 3.5;
    letter-spacing: 5px;
}
.txt p {
    font-size: 14px;
    padding-top: 22px;
    line-height: 1.8;
    letter-spacing: 5px;
}
.category:nth-child(2n) {
    background: #fff;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.category:nth-child(2n) .rect-wrap {
    z-index: 1;
    margin-left: -100px;
}

footer {
    height: auto;
    padding: 60px 0 30px 0;
    text-align: center;
    background-color: black;
}
footer p{
    color: white;
    line-height: 2.5;
    font-size: 12px;
    letter-spacing: 5px;
}
.footer-logo {
    width: 120px; 
    padding-bottom: 30px;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • ikadzuchi

    2020/11/24 23:28

    文章だけでは状況が不明瞭ですのでそれぞれのスクリーンショットを貼って下さい。

    キャンセル

  • user20

    2020/11/27 10:51

    スクショは用意しますので、お手数ですがもうしばらくお待ちいただいてもよろしいでしょうか。
    よろしくお願いします。

    キャンセル

  • user20

    2020/12/16 17:45

    ご連絡が大変遅くなってしまい、申し訳ございません。

    スクショを添付する予定でしたが、
    フォントのrem指定を改めてやり直し、使用PCなども変更して更新したところ
    不具合が改善されました。

    お手数おかけしました、
    ご回答いただき、ありがとうございました。

    キャンセル

回答 1

checkベストアンサー

0

.containerにmax-width: 1170px;を指定しているのが原因かと。
max-widthを外してフォントサイズをrem指定にしてみてはいかがでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/11/24 21:42

    ご回答いただき、誠にありがとうございます。

    教えていただいたことを試してみましたが、フォントサイズは大きくなりますが、
    全体を通して一回り小さくなっている状態を改善させることはできませんでした。

    キャンセル

  • 2020/11/25 10:41

    https://codepen.io/nanitozoz/pen/ZEpzyGv
    一回り小さくという状況がいまいちわからないのですが、
    スクショの添付はできますか?

    キャンセル

  • 2020/11/27 10:53

    ご連絡が遅くなってしまい、申し訳ございません。
    スクショは用意しますので、もうしばらくお待ちいただいてもよろしいでしょうか。
    よろしくお願いします。

    キャンセル

  • 2020/12/16 17:41

    ご連絡が大変遅くなってしまい申し訳ございません。

    スクショを添付する予定でしたが、
    フォントをrem指定にして別のPCで更新するとうまく表示できました。

    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る