viewportの設定について
解決済
回答 2
投稿
- 評価
- クリップ 0
- VIEW 915
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
Chrome と viewportのブレイクポイント の計測方法が違うのではないのでしょうか
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
check解決した方法
0
クローム検証は100%正しいわけではないと先生から教えていただきました。
実機、もしくは拡張機能で確認するのがベストということでした。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.10%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる