こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

androidのviewport設定

スマホのサイトを作ってみて、いまいち理解できない部分があったので、
教えてください。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,target-densitydpi=medium-dpi" />
上記設定で、ヘッダーとフッターがwidth:100%(各内部も%で要素の幅指定)、コンテンツ(section)が320px幅(各内部もpxで要素の幅指定)のサイトを作りました。

これで、だいたいのページでは縦の時320px、横にしたとき、コンテンツはそのままセンター、ヘッダーとフッターが伸びて表示される具合になったのですが、
よくわからなかったのが、アンドロイドの挙動です。
アンドロイドも縦横同じように(ただし、iphone画面をそのまま拡大したような)表示はしていたのですが、
一部ページで縦の時、コンテンツ左右に余白が発生してしまいました。
(コンテンツ自体は画面いっぱい、画面外に余白が発生、ヘッダーとフッターは余白含んだ幅いっぱいで表示)
見た目上は320pxに収まっていましたが、コンテンツが320px幅からはみ出ている可能性のあるページだったので、
要素にoverflow:hidden;をかけましたが特に変化ありません。
アンドロイドの自動計算かと思うのですが、
コンテンツの幅を確認しなおす他に、
見直したほうが良い箇所があればご教授頂けると嬉しいです。
(viewportが正直自信ありません・・・)

投稿日時 - 2013-07-19 19:27:37

QNo.8183176

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

http://webutubutu.com/webdesign/1555

↑こちらが参考になるかもしれません。

投稿日時 - 2013-07-26 17:05:22

お礼

遅くなってすいません、
ご回答ありがとうございました。
残念ながらリンク先参考にはしましたがそもそも背景は設定されていたので解決にならず;
今回は別口で解決しました。

投稿日時 - 2013-08-14 10:10:59

あなたにオススメの質問