Android Viewportとの戦い

tacamy @tacamy

@tobotoboto @Takazudo むしろwidthを指定せずにautoにしてたからダメなのかも・・・！bodyのwidthを100%にしたら、とぼさんの言ってるようになった！！

とぼとぼと @tobotoboto

@tacamy @Takazudo 同じiOS4.2.1です。あ、bodyにはwidth指定してないのですけど、要素にはwidth:94%とかpadding:0 3%とかって指定してます！

tacamy @tacamy

@tobotoboto @Takazudo うまく行かなかったやつは、どの要素にもwidth一切指定してなかったのですー！iPhoneは横にしたときは、コンテンツがそのまま全てズームされるんですね。

とぼとぼと @tobotoboto

@tacamy @Takazudo なるほど。たしかにiPhoneはズームしますね。いちおう部分的には、widthも余白も一切指定しないで、画面幅いっぱいに広がる要素もあって、でもAndroidでもiPhoneでも横向きでスクロールでないのですけども・・違いはどこにあるのかな。。

Takeshi Takatsudo @Takazudo

@tobotoboto @tacamy フィットするんですが、それでinitial-scale=1.0無しだと、iPhone横でviewportのwidthが320pxでscaleが1.5であるかのように扱われません？

gotta業 @hitoyam

@Takazudo @tacamy @tobotoboto 昨日バタバタしてて乗り遅れたんで今さらですけど、あたしもちょっと前からワンソースの時には initial-scale 外して作ってます！（でもそれですべて解決したわけじゃないけど）

gotta業 @hitoyam

@Takazudo @tacamy @tobotoboto んで、user-scalable とるか 拡大の妙な挙動に目をつぶってもらうかえらんでもらう… みたいなことしかできない… 無力すぎて…

とぼとぼと @tobotoboto

@Takazudo @tacamy 今やってみたのですけど、逆にinitial-scale=1.0を入れると、「viewportのwidthが320pxでscaleが1.5」な表示になる気がするのですが・・！？

tacamy @tacamy

@tobotoboto @Takazudo 逆にinitial-scale=1.0を入れるとbodyにwidth=100%を指定しててもコンテンツフィットしなくなって横にはみ出す…。maximum-scale=1.0を入れればwidth=480pxで文字も拡大されないけど。

tacamy @tacamy

@hitoyam @Takazudo @tobotoboto initial-scaleってつけてもつけなくてもあんまユーザによる拡大には影響ない気がする。maximum-scaleをどうするかで変わるような…。

gotta業 @hitoyam

@tacamy @Takazudo @tobotoboto そうなの？ あたしが扱った時は、maximum-scale じゃなくて initial-scale が影響してるパターンだった。たぶんちょっとずつソースの条件違うだろうから、なんとも言えないね…

gotta業 @hitoyam

@tacamy @Takazudo @tobotoboto あ、まちがった、「つけてもつけなくても」ね。すんません。

とぼとぼと @tobotoboto

@tacamy @hitoyam @Takazudo initial-scale=1.0はdevice-widthのとき、user-scalableとは関係なく、画面のフィットに影響しますね。ないほうがいいような。

tacamy @tacamy

@tobotoboto @hitoyam @Takazudo iPhoneが縦から横にするときに全体を1.5倍するのやめる方法があれば…。initial-scale=1.0つけて縦→横にすると画面からはみ出すけど、ピンチアウトしたりリロードすると望んだ結果になる。

tacamy @tacamy

@tobotoboto initial-scale=1.0入れないと、横のときにコンテンツ全体が1.5倍になって文字や画像が拡大されちゃって、1画面あたりの情報量が減りませんかね…？できれば文字や画像は拡大されずにコンテンツ幅だけ広げたいですよね…。うう。

tacamy @tacamy

initial-scale=1.0ついてる状態で縦から横にした場合に、コンテンツが画面からはみ出しても別にいいような気がしてきた。自分で拡大縮小できるし、初めから横向きであればちゃんとフィットするし。つけてないとすべてが1.5倍で、読み物系だと字でかすぎて読みづらいよーな…。

tacamy @tacamy

どういうのがベストかって、コンテンツの内容にもよるから、都度適切な値を指定すればいいだけか。

とぼとぼと @tobotoboto

@tacamy @hitoyam @Takazudo たしかにそうなりますね！でもinitial-scaleがあると、どちらにしろiPhoneですと、最初に傾けた時には拡大してスクロールが出ちゃうので、なんとなくそれはやっぱりどうなんだろうと思ってますです。

とぼとぼと @tobotoboto

@tacamy Android2.1～2.2はまさにinitial-scale=1.0なくてもコンテンツ幅だけ広がるんですよ！確かに情報量を考えると、iPhoneもこの挙動になってほしいですね・・。でもやっぱり傾けて最初にスクロールが出るのはユーザには分かりにくい気がしてます

tacamy @tacamy

@tobotoboto なんかJSでiPhone傾けたときのイベントとって、はみ出ないように調整とかできればいいですね・・・！（期待）リロード時とか最初から横であれば文字が元のサイズのままフィットするから、リキッドレイアウトでつくってる意味が出てくると思うんすよね。

tacamy @tacamy

@tobotoboto 横にしたときに、コンテンツごと拡大しちゃうなら、幅固定でコンテンツつくってviewportも固定にすれば縦でも横でも同じレイアウトになるし、それでいいやん…みたいな。iPhoneだけの話ですが。。。

tacamy @tacamy

RT @hitoyam: パソコンサイトそのまま見れるのが売りだった気がするスマートフォン…

tacamy @tacamy

@hitoyam はっ・・・・・・・・・！！！たいせつなことを忘れてたよ・・・！

とぼとぼと @tobotoboto

@tacamy うんうん、たしかに最初横向き⇒傾けて縦だとiPhoneでもちゃんとフィットしてくれますもんね。なんとなく勝手な思い込みで最初横ってあまりない気がしてたので市場調査もしたいす！そしてJS・・いいですね！（ﾁﾗッﾁﾗッ

tacamy @tacamy

（正直、スマホ用に最適化されてるページで、拡大縮小ってほんとにいるの？意図せず拡大してジャマじゃない？って実は思ってたりする…。）