-
KazumaNishihata
- 15897
- 0
- 44
- 9
-
- いいね！9
tacamy
@tacamy
@mattari_panda 横も縦も同じ見せ方にしたくて横基準でコンテンツ幅480pxでつくって、viewportも480pxに指定したら、縦のときもそのままのレイアウトで縮小されてましたね。あの頃はretinaもAndroidもなくって簡単だったｗ
2011-03-08 01:57:50
Takazudo
@Takazudo
@tacamy @tobotoboto いやー結局別件で調べないといかんかったのでー。もちっと調べたんですが、デバイス回してもその時のviewportのwidthはキープされると、Safariのリファレンスにはそうありました http://goo.gl/7v9tk
2011-03-08 02:03:12
Takazudo
@Takazudo
@tacamy @tobotoboto でも、Fennecやそれ以外のブラウザ（Androidも？）ではそういう挙動はしないみたいですね。これは別に仕様とか無くてAppleの真似してるだけなので、正しくはどれとかは無いみたいです。
2011-03-08 02:04:15
Takazudo
@Takazudo
@tacamy @tobotoboto 要するに両方とも拡大殺さずにぴったりフィットするのはたぶん無理じゃないかと思われます
2011-03-08 02:04:23
tacamy
@tacamy
@Takazudo @tobotoboto 分かりやすい解説ありがとうございます！ちなみにinitial-scaleを指定しないのは、minimum-scaleとmaximum-scaleが1.0だからその間は1.0にしかならないから指定する意味がないってことですかね？？
2011-03-08 02:13:08
Takazudo
@Takazudo
@tacamy @tobotoboto そうじゃないすかねーきっと。どっちにしろAndroidはそういうの効いたり効かなかったりみたいなんで、とりあえずiPhoneでinitial-scale無しで行けたならそれでいいんではないかとー。Androidについて詳細ふめいですが
2011-03-08 02:20:13
tacamy
@tacamy
@Takazudo YahooとかGREEとかは、難しいことはせずに2倍サイズの画像をimg要素のwidthとheightでムリヤリ縮めてるだけらしいですね。問題は背景画像ですね・・・。
2011-03-08 02:42:32
Takazudo
@Takazudo
@tacamy おーそうなんですねー。背景画像使わず、CSS3のグラデにする、だめなら一色および等倍画像背景とかいう風にする、そもそもPCとは違うから。って感じでやってかないと難しい気がしますねー。この先、スーパーRetinaディスプレイで1pxが16分割とかも出るかもですし～
2011-03-08 02:48:24
tacamy
@tacamy
viewportはwidth=device-width, maximum-scale=1.0だけでいい気がしてきた。あとはデバイスの処理に任せても問題なさげな、ような・・・。
2011-03-08 07:52:45
tacamy
@tacamy
iPhone4の場合、viewportのwidth=device-widthは640pxだけど、devicePixelRatioが2だからコンテンツの1pxがデバイス上で2pxとなって、viewportのwidth=320pxのように見せてるだけだから、
2011-03-08 08:01:51
tacamy
@tacamy
制作者側でviewportの拡大率とかを全部指定してしまうより、そのへんはデバイスによしなにしてもらった方が色んなデバイス出てきたときに対応できそ？？Androidはユーザ自身でdevicePixelRatioを大中小と変更できるし、そのへん考えるとギチギチにするのこわい。
2011-03-08 08:05:00
fujitaiju@英語が趣味なりつつある人
@fujitaiju
RT @tacamy これはよい日本語訳。Android 開発ガイド > ウェブアプリ http://bit.ly/eUyAtw
2011-03-08 08:11:41
クロカワリュート
@ryuto_kurokawa
@keis @tacamy アップデートできないOSなんて...... (´;ω;`) 悲しいくらい予想通りにクロスデバイス暗黒時代に突入ですね。
2011-03-08 09:09:39
kei
@keis
@tacamy @180mm IS01のサポートが１，６でおわったように、国内で生産された端末はキャリア･メーカーによってバラつきがあるという傾向です。。。残念ながら。
2011-03-08 09:19:27
とぼとぼと
@tobotoboto
@Takazudo @tacamy width=device-width, user-scalable=yesでminimumとmaximumは指定せず、bodyにはwidth指定しないで要素を%で幅指定した時、AndroidでもiPhone4でも縦も横も画面幅にフィットしました
2011-03-08 09:35:03
とぼとぼと
@tobotoboto
@Takazudo @tacamy ちなみに-webkit-text-size-adjust: none;です。ただ、Android2.1、2.2は横にしても文字は拡大しないですが、iPhone4は拡大しますね。でも画面幅は両方ともぴったりしてます。
2011-03-08 09:38:47
とぼとぼと
@tobotoboto
@Takazudo @tacamy 縦でユーザーがピンチで拡大した時、Androidはそのまま横にすると拡大した状態で画面幅にフィットして、縦に戻しても拡大率が保持されてますね。iPhone4は拡大しっぱなしで、たしかに横スクロールでますね。
2011-03-08 09:43:41
tacamy
@tacamy
@tobotoboto @Takazudo iPhone3GSだとそれやると横にしたときにコンテンツが画面よりも外に拡大してはみ出しちゃって。4と動きが違うんですかね・・・。
2011-03-08 09:45:57
とぼとぼと
@tobotoboto
@tacamy @Takazudo えー？！今3GS（OSはバージョンアップしてある）でも確認してみたのですが、コンテンツはちゃんと画面幅にフィットしてくれましたよ。幅指定でpxとかはお使いになってないですよね？
2011-03-08 09:55:26