レスポンシブデザイン、各スマフォ端末の確認方法は？

質問

今回仕事に向けた勉強用のサイトをレスポンシブサイトにしました。
ローカルではブラウザの幅を変えて確認していましたが、スマフォに関しては、
各端末確認できるようなサイトもありましたが、実機と異なることに気づき、
自分のiPhone4ｓでレイアウトが崩れていないので安心していました。
しかし念のためAndroidの友人に確認してもらうと、一部崩れがあると言われました。
いちいちいろんな友人を頼るわけにいかないので、自分で主要な各端末確認できる環境が欲しいのですが、プロのみなさんはどうやって確認していますか？
また、全ての端末をターゲットにすることが無理なのであれば、ターゲットの端末などはその時のお客さんによって変わるのでしょうか？

こちらはレスポンシブでないサイトなら仕事で制作しております。
独学でフリーになったので生の情報が少なく、ここに書かせていただきました。

回答No.2

TRUE_FALSE · ベストアンサー

私自身も今、レスポンシブに対応するサイト制作のため色々と調べているのですが、
実機をエミュレートできるサービスがNTTレゾナントで始まっています。

http://appkitbox.com/testkit

参考になさって下さい。

お礼

ありがとうございます！早速DLしてアカウントを作成致しました。
いづれ有料になるようですが、仕事につかえるなら多少コストがかかっても構いません！
同業者の友人に聞きましたが、Androidはバグがあるようですね...それでAndroidだけ崩れていたようで、注意すべきソースの書き方を修正したら実機の方でもうまく表示されたようです。このサービスにAndroidがあるか確認しておりませんが、注意すべきなのはAndroidのようです。今度試してみます１

回答No.1

ORUKA1951

私は、もう10年近くリキッドでしか製作してませんので(^^)、固定幅で製作されている方のことがわからないのです。というのは御存知のように

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
　HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
　・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　なのですから、立案の時点で「様々な幅のPCディスプレイだけでなく、携帯電話、モバイル機器、プリンター、検索エンジン」は考慮済みなのですから。

　私の場合、公的な機関も多いので点字端末やスクリーンリーダーも考慮しなくてはならないし、印刷への対応も必要な場合があります。

　そもそも「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。」のですから、基本に忠実に製作すると、各端末での表示は気にしなくて良いはずです。そのためにHTML(+CSS)を使って製作するのですからね。

　レスポンシブデザインは、元々HTML4.01(CSS2)の時代から用意されているmedia別スタイルシートの拡張に過ぎません。
　⇒14.4.1 メディア依存のカスケード( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.4.1 )
　⇒7 メディアタイプ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/media.html )
　例えば、リキッドで製作されていても、800px以下のデバイスには、すこし縮小して表示させ、640px以下などそれでも足りないときはabsoluteで左脇に配置していた要素を、staticに変更して下に回すなとです。

　とは言っても、実際にどのように見えているかの確認は必要ですから、開発者ならfirefoxをお使いだと思いますが、 FireMobileSimulator( https://addons.mozilla.jp/firefox/details/8519 )を使われれば概略は判断できます。

※ウェブはカタログじゃないのです。「どんな環境からもWebの情報を利用できるようにすべき」が最優先であり、そのための仕様なのです。PDFとは違う!!!
　それでも、スタイルシートの導入でデザインの可能性は大きく広がりましたから、崩れてしまうようなデザインはしなくても良いです。

お礼

回答ありがとうございます。FireFoxを利用していましたが、 FireMobileSimulatorを知らなかったのでDLして利用してみました。しかしなぜか実機とは異なるようです。
今回わたしが作成したサイトも、iPhone4s,5,Xperiaではレイアウトが崩れていないのに、Androidだけ崩れているようで、対策に困っています。
もうちょっと他の同業者の友達などにも聞いてみます。