Q&A
コードは```でかこんでください。
環境
パソコン MACOS 10.13.6 + Google Chrome 72.0.3626.121
スマートホン ANDRIOD 7.1.1 + Google Chrome 72.0.3626.121
お世話になります初心者です。
同一のHTML+CSSファイルで作ったグリッド表示するはずのファイルなのですが、パソコンではグリッドとして表示しますが、スマートホンでは、ただの箇条書きになってしまいます。
何が原因なのでしょうか？
ｈｔｍｌ ＝ serch.html ------------------
css = serch.css -------------------
前提・実現したいこと
html・cssファイルで、パソコンでは表組みが認識されるのに、スマホでは認識されない
発生している問題・エラーメッセージ
パソコン Mac OS 10.13.6 + Google Chrome 72.0.3626.121
スマートホン Android 7.1.1 + Google Chrome 72.0.3626.121
で同一のhtml cssを表示したとき、パソコンでは表組みが再現されているのに、スマートホンではただの箇条書きとして表示されます。
該当のソースコード
----------------------ここからserch.html----------------------- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>title</title> <link href="css/serch.css" rel="stylesheet" type="text/css"> </head> <body> <div class="row s-row-eq-hight"> <div class="s-item s-box-wide">1ここ</div> <div class="s-item s-box-wide">2ここ</div> <div class="s-item s-box-wide">3ここ</div> <div class="s-item s-box">4ここ</div> <div class="s-item s-box">5ここ</div> <div class="s-item s-box">6ここ</div> </div> </body> </html>``` ```
----------------------ここからserch.css-----------------------
@charset "UTF-8";
.s-row-eq-hight {
display: flex;
flex-wrap: wrap;
}
.s-box-wide {
box-sizing: border-box;
width: 100%;
}
.s-box {
box-sizing: border-box;
width: 50%;
}
.s-item {
background: #fff;
padding: 0px;
border: 1px solid #ccc;
}
### 試したこと 長々と書き込んでいたコード類を徐々に削りながら原因を探りましたがわからず、上記の所まで削りましたが結局原因がわからないままです パソコン画面↓  スマホの画面↓ 
コードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/help#about-markdown
質問に「初心者」と書くのではなく「初心者アイコン」をつけてください。
えっと表みたいな感じにしたいってことですか？
みなさますみません。
マークダウンの仕方を確認して再投稿します。
ご迷惑にならないように削除すべきかと思いますが、その方法すら分からずに申し訳ないです。
編集できるので再投稿の必要はありません
質問は編集できるので適宜ご対応いただければと。
あとAndroidのスペル違います。
可能であれば、PC,スマホ双方のスクリーンショットもご提示ください。
細かくて申し訳ないですが、HTMLとCSSなど、ファイルが違うのでしたらcode対応もわけられたほうが
こちらとしては助かります。なるべくファイル単位で、コード関係以外書かないような感じで（ファイル名はブロック外、上とかに補足で書く形でOKです）
このCSSだと、「1ここ」というボックスがグリッドコンテナになると思うのですが、それは想定どおりでしょうか？
皆様、わけ分からぬ内容でご迷惑おかけしています。
1〜6の「ここ」というコンテナを作るつもりで書いたのですが、パソコンでは思った感じになるのですが、スマホで表示するとただの箇条書きになってしまうのです。
スマホ確認すぐできないのであれですがviewport効いてるかもしれませんね。
PC表示であっても、grid CSS は効いていない（5ここが右に振れているのはfloatのせい）と思うのですが、とりあえずこれはこれでいい、という理解であっていますか？
ありがとうございます。htmlに
<!--<meta name="viewport" content="width=device-width">-->
としてviewportを読み込まずに見てみましたが、PC・スマホ共に表示に変化はありませんでした。
ということはこの一行も不要だったということですね。もうちょっと削りながら検証してみます。
わかりました。お待ちします。
なお、おそらくtypoがありましたので報告します。
s-row-eq-hight
s-row-eq-height
不要ではないですよ。きちんと意味を理解した上で入れる必要があるということです。
https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607
仮説として「viewportが効いていてdevice-widthによって伸縮しているのかな」というのを伝えたかったわけです。
flexってかなり柔軟ですし、そのあたり自動でやってくれる可能性もあったので。
念のため、個々のブロックに背景色をそれぞれ別の色をつけて確認すると何がどこまできいているのかわかりやすくなりますよ。
もしかしたら「スマホでアクセスしている先だけCSSきちんとリンクされてない」のかもしれませんし。
192･･･ということはローカルネットワークっぽいですが、PC,スマホ両方同じURLで見ていますか？
誤字訂正の後、相当削りましたが、状況変わりませんでした。
グリッドレイアウトをやめたのであれば、タイトルを変更した方がいいかもしれませんね。
mts10806さん、ありがとうございます。
個々のブロックに背景色をそれぞれ別の色をつけてみます。
『パソコンでは表組みが認識される』とあり、AndroidのスクリーンショットでIPアドレスが見えていますが、PCでも、同様にローカルサーバにアクセスしての確認でしたか？
それとも、ローカルにあるファイルをダブルクリックして確認しましたか？
下から2番目の.s-itemの色で全てのブロックが塗りつぶされました。
ブロックがない場所は一番上の.s-row-eq-hightの色になりました。
クラスネームの付け方に問題がありそうな気がします。ちょっと付け替えてみます。
クラスネームをシンプルにしましたが、結局スマホでは背景色もつかずに変わりない状況でした。ご報告まで。
Lhankor_Mhyさんありがとうございます。
macのローカルサーバーのファイルにPC/スマホ共にアクセスして確認しています。
他のHTMLファイルなどについては問題はないようです。このファイルだけがもう何ともおかしなことになっています。
なるほど。
Andriodから、URL直打ちでCSSファイルを見ると、どうなりますか？
Lhankor_Mhyさんありがとうございます。
今はローカル環境しかありませんので、macのXAMPPでApacheを起動しLAN経由でhttp://192.168........と打ち込んで接続していますが、やはりこのファイルだけスマホに嫌われている状況です。
やはりそうですか。
そうすると、HTMLやCSSの記述を変えても解決しなさそうですね。
ちなみに、404エラーですか？
いずれにせよ、タグをApacheなどに変えて質問した方が、有効な回答が得られそうですね。
スマホのキャッシュがクリアされていないだけでは？
Lhankor_Mhyさん、ありがとうございます。
上の「試したこと」のすぐ下あたりのスクリーンショットのように、PCではブロック表示できるのにスマホでは箇条書きという状況から脱することができていません。
ん？
「このファイルだけスマホに嫌われている」というのは、「URL直打ちでCSSファイル」を見た結果ではないのですか？ それが、404やその他のエラーになっている、ということではないのですか？
yoshinaviさん、ありがとうございます。
スマホは、ソースを書き換える度に再読み込みボタンをクリックしているので、大丈夫だとおもうのですが...。
機種に寄りますが再読込も2つあります。キャッシュのクリアをする場合としない場合があるので、設定でキャッシュクリアするか確認が必要です。
＞ソースを書き換える度に再読み込みボタンをクリックしている → エディタの事ですか？スマホ本体ではなく？
yoshinaviさん、ありがとうございます。スマホのブラウザに再読込の指示をしていました。
念のためスマホのキャッシュをクリアしてみました。....なんと！
本当に皆様申し訳ないことでございました。スマホに表示されるようになりました。
ありがとうございました。
回答1件
0
自己解決
こちらで教えていただいて、スマートホンのブラウザのキャッシュをクリアしたところ、PC同様の画面表示になりました。
「再読込」だけで、新たにファイルを読み込みこんでいるという思い込みが生んだ、私のミスから皆様をお騒がせいたしました。
ご指導ありがとうございました。
投稿2019/03/11 08:23
総合スコア10
あなたの回答
tips
プレビュー
