[Bootstrap]スマホ対応のWEB画面の確認方法

[bobo]

こんにちは。C言語の質問じゃないのですが。

今、Javaでスマホ(iPhone,iPad,Android)向けのWEBサイトを作っています。

スマホはそれぞれ、ディスプレイサイズ＆縦横の表示が可能などあり、
Twitter BootStrapと言うライブラリを用いて、このディスプレイサイズの
可変に対応しようと思いました。

開発機(WIN7)には、「iBBDemo3」と言うiPhone,iPadのエミュレータを使ってレイアウトの確認をしています。
このiBBDemo自体、完成度の低いエミュレータと言うのは認識していましたが、開発機では、正しく表示されて
いるのにiPhoneの実機で確認すると同じように表示されません。

BootStrapでは、
@media (min-width: 768px) and (max-width: 979px) {
@media (max-width: 767px) {
@media (min-width: 768px) and (max-width: 979px) {
@media (max-width: 979px) {
のように、これらのウインドウサイズに合わせたレイアウトを適用してくれるのですが、
(メディアクエリーと呼ばれるHTML5,CSS3のみ対応なのかもしれませんが)
実機で正しく判定できておらず、PC画面のように、
画面全体が表示され、レイアウトが縮小されて表示されてしまいます。

みなさんは、スマホ対応WEB画面作成時、どのように画面レイアウトを確認しているのでしょうか？
また、PC上で利用し、正しくレイアウト確認できるエミュレーータをご存知であればご教示頂ければ幸いです。

よろしくお願いします。

[softya（ソフト屋)]

Twitter BootStrapは利用していません。基本はviewportの設定だけですね。
あと@media のメディアクエリはちゃんと動くようですよ。
私の場合は、iBBDemo3でもiPhoneでもちゃんと表示されています。

[bobo]

ありがとうございます。

あるユーザからiPhoneで全体表示され、画面内の要素が縮小されるとの連絡を受け、
Safari、Chromeのキャプチャを送ってもらい、確かにそのように表示されていました。
(機種は聞き忘れてしまいました・・)

メディアクエリはHTML5+CSS3対応なので、古い機種では見れませんと言い切っちゃって良いのでしょうか？

ちなみにこういう確認サイトもあるんですね。localhostも指定できますし、一般的なスマホ・タブレットの確認もでき、かなり良いですね。
http://responsinator.com/?url=XXX

[softya（ソフト屋)]

私は業務で書いているわけではないので、チェックは甘いと思います。
ただ、iPhone2となると分かりませんが、iPhone3あたりなら問題なく動くのでは？
viewport自体がiOS発祥だと聞きますし。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0," />
大抵こうなっていれば大丈夫ってつもりでいたんですが、ダメなのが有るんでしょうか？

[bobo]

ありがとうございます。

BootStrapで組み込まれていると思ったんですが、
これが記載されていない為の現象ですね(たぶん)。

ありがとうございます。
これで様子を見てみます。

[softya（ソフト屋)]

私はjQueryMobileで利用していますがviewportで問題なく動作しているように見えます。
ただ、多数の機種を試していないので罠があるかもしれません。無いかもしれません。
仕事で使うなら慎重な確認をお願いします。

あと、viewportの書き方は色々とあるので最適な書き方は都合によって変わると思いますので調整してください。
maximum-scale=1.0だとピンチで拡大出来なくなります。