先日、あるWebサイトをスマホで確認したときの話です。
画面サイズがほぼ同じ（と思っていた）iphoneとAndroidでWebサイトを確認すると、画面が大きなAndroid端末がiphoneSEで見た時と同じような表示になってしまっていました。
おそらく、Androidでは画面の横幅がiphone SE（width:320px）と同じようなサイズに見えているのだと思いましたが、自分の手元に端末が無いので確証が取れませんでした。
最終的には、問題が発生している端末であるサイトにアクセスしてもらい、Android端末の画面サイズがどのようにブラウザで認識されているか情報を表示させ、確認しました。
この記事では、手元にない端末の画面サイズがCSS上どのように認識されているか確認する方法をまとめておきたいと思います。
問題点：Android端末は情報が少ない
iphoneと違ってAndroid端末はいろんな種類があります。
困ったことにサムソン等の数が出ている端末であっても、型名を入れて検索しても画面サイズの情報が出てこないものが多いです。
Android端末は実際の端末が手元にないとレスポンシブの動作確認ができません。
検証方法：端末の情報を確認できるサイトにアクセスしてもらう
端末が手元にない時に、端末の画面サイズがいくつなのかを知りたいとします。
持っている本人に聞くのが一番いいですが、ふつうは知らないと思います。
その端末を持っている人に特定のサイトにアクセスしてもらって情報を吸い上げるのが一番確実です。
mydevice.io : web devices capabilities
www.mydevice.io
まとめ
実機が手元になく、実機を持っている人が詳しくない場合、特定のサイトにアクセスしてもらって情報を吸い上げることで状況確認が容易にになりますよ、というお話でした。
javascriptで吸い上げられる情報かもしれませんが、そのようなコードを書くのも手間なので、あるものを使う方が賢いと思います。
