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が正直自信ありません・・・）
お礼
ありがとうございます。 すいません下記サイトに答えが書いてあるのを発見しました。 上下のmargin、paddingは 求めるmargin(padding)の高さ÷親要素のコンテンツ幅÷100% で求められます。 親要素の高さでなくて幅が相対の基準となる点に注意してください。 http://design-spice.com/2014/03/24/percentag/ なぜ縦幅のマージンを親要素の横幅で計算するのがなぞですが？ 理由をご存知ですか？