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

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

ただいまの
回答率

90.85%

  • HTML

    7778questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4965questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

viewportの設定について

解決済

回答 2

投稿

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

roronoazoro

score 61

viewportの設定について質問です。

現在、webサイト制作してまして、モバイル全体 → タブレット768px以上 → pc用1024pxといった順序で作成しています。
そこで質問なのですが、クローム検証とviewportのブレイクポイントが一致しません。

イメージとして下記の画像のような状態です。

イメージ説明

イメージ説明

これは自分のstylesheetの記述が原因なのでしょうか?

長文になってしまうのですがコードも載せておきます。

@charset "utf-8";
html,body,h1,h2,h3,h4,dl,dt,dd,ul,li,p{
    padding: 0;
    margin: 0;
    line-height: 1.5;
    font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
/*font-size*/
html{font-size:62.5%;} /*10px*/
body{
 font-size:16px;
 font-size:1.6rem;}/*16px*/
h1 {
 font-size: 32px;
 font-size: 3.2rem;
}
h2 {
 font-size: 24px;
 font-size: 2.4rem;
  padding:12px 0;
  background-color: #f6f6f6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
h3 {
 font-size: 20px;
 font-size: 2.0rem;
  border-bottom: 3px dotted gray;
  padding:12px 0;
}
h4 {
 font-size: 18px;
 font-size: 1.8rem;
  padding:12px 0;
}
p {
 font-size: 16px;
 font-size: 1.6rem;
}

img{ 
 width:100%;
}

html {
    font-size: 62.5%;
}/*=10px*/
body {
    font-size: 16px;
    font-size: 1.6rem;
    position:relative;
} /*16px*/

header,#navi,#contents,#petHotel,#access,footer
{width:100%;}

#container{
 width:90%;
 margin:0 auto;
}

/*header*/
header{
 text-align:center;
 padding-top:24px;
 background:url(../img/bg_color2.jpg);
 }
.h1_logo{
 width:30%;
 height:30%;
}
#header_wrapper2{
 padding:24px 0;
}
p.title{
 font-size:2em;
 font-weight:bold;
 margin-bottom:12px ;
 font-family:'Hiragino Maru Gothic Pro';
}
#info_header{
 display:none;
}

/*navi*/
ul{list-style:none;}
a{text-decoration:none;}
#navi{
 overflow:hidden;
 margin-bottom:30px;
 background: -webkit-linear-gradient
 ( 0%,#64F0F0 50%,#C1EDEF 51%,#32EAEA 100%)
}
#navi ul li{
 width:50%;
 float:left;
 border-left:3px solid #fff;
 border-bottom:3px solid #fff;
 box-sizing:border-box;
 background: -webkit-linear-gradient(
    top,
    #ebf6f7 0%,
    #C1EDEF 49%,
    #C1EDEF 51%,
    #4FEDED 100%
  );
}

#navi ul li a{
 display:block;
 padding:12px 0;
 text-align:center;
 white-space:nowrap;
 color:black;
 text-shadow:0 1px 0 gray;
}
#navi li a:hover{opacity:0.5;}

/*#contents*/
#contents{
 overflow:hidden;
 width:90%;
 margin:0 auto;
 text-align:center;
}
#contents > h3{margin:12px 0;}
#contents .topimg{
 float:right;
 margin-bottom:12px;
}
p.contents_main{
 margin-bottom:12px;
 text-indent:1em;
 text-align:left;
}
p.contents_indent{
 text-indent:1em;
 text-align:left;
}

/*#content_wrapper*/
#contents_wrapper{
 overflow:hidden;
 margin-bottom:24px;
}

/*.contents_box1{
  width:420px;
  float:left;
  overflow:hidden;
}
.contents_box2{
 width:420px;
 float:right;
 overflow:hidden;
}*/

/*料金表 #price*/
#price{
 width:90%;
 margin:0 auto;
 text-align:center;
}
#price>h2{margin-bottom:24px;}
/*#trimming*/
.trimming_table{
 width:100%;
 height:30px;
 line-height:3.0;
 margin:0 auto;
 margin-bottom:30px;
}
.trimming_table .status1{
 background:#b0f6f6;
} 
.trimming_table .status2{
 background:#ecf9fa;
}
.option_table .status1{
 background:#b0f6f6;
}
.hotel_table .status1{
 background:#b0f6f6;
}
caption{
 font-weight:bold;
 font-size:1.2em;
}

/*#wrapper*/
#trimming_wrapper{
 overflow:hidden;
 width:100%;
 margin:0 auto;
 margin-bottom:30px;
}
/*#option*/
.option_table{
 width:100%;
 height:30px;
 line-height:3.0;
}
/*hotel*/
.hotel_table{
 width:100%;
 height:30px;
 line-height:3.0;
 float:right;
}

/*#pethotel*/
#petHotel{
 overflow:hidden;
 text-align:center;
 width:90%;
 margin:0 auto;
 margin-bottom:30px;
}
#petHotel>h3{margin-bottom:12px;}
#petHotel .Hotel_img{
 margin-bottom:12px;
}
#petHotel_wrapper{
 overflow:hidden;
}
#petHotel img{
 float:right;
 margin-left:15px;
}
#petHotel_wrapper>p{text-align:left;}
#petHotel>ul li{
 text-align:left;
 line-height:2.5;
 }
.anchor_price{
 font-weight:bold;
 color:black;
 padding:6px;
 background:#b0f6f6;
}
.anchor_price:hover{
 color:pink;
}

/*#access*/
#access{
 width:90%;
 text-align:center;
 margin:0 auto;
 margin-bottom:24px;
}
#access_wrapper{
 overflow:hidden;
 width:100%;
}
.access_local{
 width:100%;
 float:right;
}
.access_local>dl>dt{
 background:#ffd4e9;
 font-weight:bold;
 padding:20px 0;
 padding-right:20px;
}
.access_local>dl>dd{
 padding:20px 0;
}
.gmap{
 float:left;
}

/*topへ戻る*/
#pageTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
}
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/*footer*/
footer{
 width:100%;
 overflow:hidden;
 background:url(../img/bg_color2.jpg);
}
#footer_wrapper{
 width:80%;
 margin:0 auto;
 padding:24px 0;
 overflow:hidden;
}
footer ul li{
 width:25%;
 float:left;
 border-right:1px solid gray;
 box-sizing:border-box;
}
footer ul li:last-child{
 border-right:none;
}
footer ul li a{
 font-size:0.9em;
 display:block;
 text-align:center;
 color:black;
 text-shadow:0 1px 0 gray;
}
footer li a:hover{opacity:0.5;}
footer>p{
 text-align:center;
 }

@media screen and (min-width: 768px){
 #navi,#contents,#petHotel,#access,footer{
  text-align:left;
 }
 /*font*/
 h2{padding-left:6px;}
 /*navi*/
 #navi ul li{
  width:25%;
 }
 /*header*/
 .h1_logo{
 width:20%;
 height:20%;
}
/*#access*/
.access_local dl{
 width:100%;
}
.access_local>dl>dt{
 float:left;
 clear:left;
 background:none;
 border-bottom:1px dotted gray;
 width:20%;
 padding-right:0;
}
.access_local>dl>dd{
 border-bottom:1px dotted gray;
 float:right;
 width:80%;
}
.gmap{
 float:left;
}


/*footer*/
footer p{
 text-align:center;
 }
}

@media screen and (min-width: 1024px){
 #container{
  width:1024px;
 }
}

分かる方いましたらよろしくお願いします。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

check解決した方法

0

クローム検証は100%正しいわけではないと先生から教えていただきました。
実機、もしくは拡張機能で確認するのがベストということでした。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

Chrome と viewportのブレイクポイント の計測方法が違うのではないのでしょうか

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • HTML

    7778questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4965questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。