Q&A
スマホ版は横長のページを作ろうとしてるんですか？
html
1<!doctype html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8" /> 5<meta name="viewport" content="width=device-width,initial-scale=1.0" /> 6<title>test</title> 7<style> 8html, body, div{ 9 margin: 0; 10 padding: 0; 11} 12html, body{ 13 background-color: #999; 14 min-height: 600px; 15 min-width: 900px; 16 overflow: hidden; 17} 18</style> 19</head> 20<body> 21<div style="background-color:#ccc;height:600px;width:900px;">test</div> 22</body> 23</html>
このようなHTMLをChromeのスマホモード(320*568px)で表示すると、横が900pxに対して縦が数千pxと、非常に縦長なページになってしまいます。
原因がわからないのですが、どうしてこのような挙動となるのでしょうか。
追記
PCで見た時はPCの画面サイズ(900600pxよりも大きい場合)に、スマホで見た時は900600pxに合わせたいと思っています。
なので、320*568pxの画面で見た時には、横に580pxと縦に32pxだけスクロールできるようになってほしいです。
現状、html要素やbody要素は高さ600pxにもかかわらず、画面外のずっと下までスクロールできてしまいます。
追記
Chrome以外のブラウザで確認してもこのような問題は起こらないので、Chromeのバグを疑い始めました。
PCの時はPCの画面サイズに、スマホの時は900*600pxにしたいと思っています。なので320*568pxの画面で見た時には、横に580pxと縦に32pxだけスクロールできるようになってほしいです。
回答3件
0
ひとまず意図は分かりませんが、これで落ち着くと思います。
css
1html, body{ 2 background-color: #9e9; 3 min-height: 600px; 4/* min-width: 900px;*/ 5 overflow: hidden; 6}
投稿2016/10/10 15:50
総合スコア2722
意図を追記いたしました。
では「overflow: hidden;」も取ってください。
overflow: hidden;を削除してみましたが変化ありません。
あ、body直下ですか。
何かで囲まないとダメなような…
-------
<div style="width: 100%;overflow: auto;">
<div style="background-color:#ccc;height:600px;width:900px;">test</div>
</div>
-------
こんな感じで。
このtestというdivは状況をわかりやすくするために作られているものなので、極端な話、bodyが空でも縦の大きなスクロール領域が現れるのです。
0
html
1<div style="background-color:#ccc;height:600px;width:900px;">test</div>
height:600px;width:900px;
- 追記
確認しましたがheight:600px;width:900px;となっていました。
投稿2016/10/10 14:02
編集2016/10/10 14:18
総合スコア769
0
ベストアンサー
上記のソースコードは実機で試してみましたか？
私のiPhoneで確認したときは意図する動きになりました。
縦に長くなるのはchromeのバグのような気がします。
投稿2016/10/11 04:46
総合スコア162
あれ？実機でOKならよかったのかな？
ともあれ今スマホが手元にないので確認できないですが^^;
実機のchromeでも問題なければいいのだけど…
AndroidのChromeでも問題の表示でしたが、標準ブラウザで確認したところ意図した表示になりました。Chromeのバグかもしれませんね。とはいえ、Chrome自体が標準そのもののような存在なので、どうにかできるものならどうにかしたいです。
あなたの回答
tips
プレビュー
