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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

4回答

384閲覧

ダブルタップしないとレスポンシブデザインにならない

yurim

総合スコア12

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2018/11/29 05:10

携帯、タブレットで閲覧した時にダブルタップしないとレスポンシブデザインにならないのはなぜでしょう?
ページを開くと、まずはPC版で表示されダブルタップでレスポンシブに変わる感じです。
PCでは、F12で携帯サイズを確認しますが、その時はダブルクリックしないとレスポンシブで閲覧できません。レスポンシブの閲覧は問題ないのですが、
サイトを開いた時と次ページへ飛ぶ際にPC版の表示となります。
CSSはレスポンシブ用で別でファイルを作成しHTMLとリンクさせています。```

HTML

1<meta name="viewport" content="width=device-width,initial-scale=1"> 2<link rel="stylesheet" href="../css/responsive.css">

CSS

1@media screen and (max-width:600px){ 2}

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/11/29 05:16

書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)か、再現するURLを提示されたほうが回答を得やすいと思います。
kei344

2018/11/29 05:59

(質問文は編集できます)この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。(回答欄にご自身で書かれたコードも含めて)
Lhankor_Mhy

2018/11/29 06:00

https://arvo-corp.com/ を拝見しましたが、ダブルクリックしてもモバイルサイズになりませんでした。CSSのコメントにtypoがあるようです。
Lhankor_Mhy

2018/11/29 06:04

ああ、モバイル実機で見て分かりました。ダブルタップで全画面表示になっているだけで、widthは1240pxぐらいありますよこれ。スライダーを見直すことをお勧めします。
yurim

2018/11/29 06:18

コンテンツ部分はCSSのレスポンシブが反映されているので、スライダーのサイズだけを見直した方が良いとゆう事でしょうか?
Lhankor_Mhy

2018/11/29 06:28

CSS見てみましたが、@importが悪さをしているような気がします。削除されては?
Lhankor_Mhy

2018/11/29 06:36

あと、スクリーンサイズによらず、.footer-column が width:1240px になってますね。
yurim

2018/11/29 06:47

フッターも気になってた箇所ではありました。。。ずいぶん前にバックアップ用として保存しておいた現況より前のIndex.htmlで確認したらダブルクリックせずに携帯画面を確認する事できました。うーんもう少し探ってみます。
guest

回答4

0

bodyにmin-width:1240px;が設定されているのが第一の原因かと思います。

lang属性も間違っています。が、今は記述の必要は特にないので、記述しなくて良いとおもいます。

投稿2018/12/01 12:39

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

css

1body { 2 line-height:1.5em; 3 margin:0; 4 font-family:"メイリオ","MS Pゴシック",sans-serif; 5 min-width:1240px; // ←responsive.cssで上書きされない 6 width:100%; 7} 8.wrapper-all{ 9 margin: 0 auto 0 auto; 10 min-width:1240px; // ←responsive.cssで上書きされない 11 width:100%; 12} 13.header-inner{ 14 min-width:1240px; // ←responsive.cssで上書きされない 15 width:100%; 16 height:650px; 17} 18#contents{ 19 min-width:1240px; // ←responsive.cssで上書きされない 20 width:100%; 21} 22

を修正したところ、それっぽくなりました。ただ、他にも修正すべき点は多いです。

投稿2018/11/29 06:58

Lhankor_Mhy

総合スコア35860

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

HTML

1<head> 2<meta charset="utf-8"> 3<meta name="keywords" contents="アルヴォ"> 4<meta name="" contents="アルヴォ仙台"> 5<meta name="description" contents="スマートソリューションへ-アルヴォ【ARVO】"> 6<meta name="viewport" content="width=device-width,initial-scale=1"> 7<!-- Global site tag (gtag.js) - Google Analytics --> 8<script async src="https://www.googletagmanager.com/gtag/js?id=UA-129488631-1"></script> 9<script> 10 window.dataLayer = window.dataLayer || []; 11 function gtag(){dataLayer.push(arguments);} 12 gtag('js', new Date()); 13 14 gtag('config', 'UA-129488631-1'); 15</script> 16 17<title>株式会社アルヴォ-ARVO</title> 18<link rel="stylesheet" href="../reset.css"> 19<link rel="stylesheet" href="../css/style.css"> 20<link rel="stylesheet" href="../css/common.css"> 21<link rel="stylesheet" href="../css/responsive.css"> 22<link rel="shortcut icon" href="favicon.ico"> 23 24<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 25 26</head> 27コード 28``` 29コード 30```

投稿2018/11/29 05:49

yurim

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ダブルタップというのは具体的にどこを押しているのでしょうか。。
レスポンシブサイトは問題無く確認できているのであれば
恐らくcssの読み込み位置の問題だと思われますが
提示していただいてる部分だけでは推測でしか回答できず
なかなか難しいです。

可能であればcssを読み込んでいる部分のhtmlをもう少しいただけると分かるかと。

投稿2018/11/29 05:27

mepon

総合スコア480

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yurim

2018/11/29 05:48

携帯に表示されるのは、PC版でいうと左角部分が表示されます。 ナビ部分と画像(JS)のどこをダブルタップしても結果は同じになります。 <head>~</head>部分までで判明しそうでしょうか? ```HTML <head> <meta charset="utf-8"> <meta name="keywords" contents="アルヴォ"> <meta name="" contents="アルヴォ仙台"> <meta name="description" contents="スマートソリューションへ-アルヴォ【ARVO】"> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-129488631-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-129488631-1'); </script> <title>株式会社アルヴォ-ARVO</title> <link rel="stylesheet" href="../reset.css"> <link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="../css/responsive.css"> <link rel="shortcut icon" href="favicon.ico"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> </head> コード ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問