パソコン、タブレット、スマホのスクリーンサイズを把握して異なるスタイルシートを適用する方法
タブレットではパソコン用CSSを適用するべきである
大前提として、当社では、タブレット端末には、パソコン用ページ（ＵＲＬ）・パソコン用ＣＳＳを適用するべきであると考えています。タブレットでウェブページを訪問した場合、
少し変な印象を受けた経験をお持ちの方も多いのではないでしょうか？即ち、タブレットで訪問した場合、内容が左に偏って、右に空白が多いウェブページが多数あります。
原因は、制作業者が、タブレットに対しても、スマホと同様のページ（同じCSS適用）を表示しているからです。当社では、ページ訪問者の使用されている端末の画面サイズ（スクリーンサイズ）を把握して、ホームページ制作を行いますので、タブレット対応も完全です
以下の内容は、若干専門的ですので、ご参考までとして下さい。
navigator.userAgentによる振り分けの問題点
通常、モバイル端末による訪問かどうかの判定は、navigator.userAgentを使用します。即ち、ブラウザ名を取得して判定する手法です。
その後、異なるスタイルシートを適用します。iphoneやipadの場合には、この手法が完全に有効で、なんらの問題もありません。
ＣＳＳ振り分け用のjavascriptの指定を、iphoneのみとすれば、ipadでは、パソコン用CSSを適用できます。
しかし、この一般的な手法の致命的な欠点は、android搭載のタブレット対応にあります。 特に、ワイヤレスキーボード付きの場合、「見た目はパソコン」ですから、致命的です。 使用機器の画面サイズ（スクリーンサイズ）を把握できなければ、android搭載のタブレットでは、navigator.userAgentによるＣＳＳ振り分けでは、スマホ用ＣＳＳが適用されてしまします
弊社が提起する手法は、ブラウザ名のみを取得して判定する一般的な手法と異なり、ページ訪問者のスクリーンサイズ（画面サイズ）を把握した上で ブラウザ名を取得してandroid搭載のタブレットでパソコン用ＣＳＳを適用する手法です。
ページ訪問者が
モバイル端末（タブレット又はスマートフォン）パソコンのいずれを使用しているかではなく、
スマートフォンタブレット・パソコンのどちらを使用しているかを判定し、自動的に異なるスタイルシートを適用できるJavascriptです。
スクリーンサイズ（画面サイズ）を把握する場合の注意点
①有効画面幅を把握するwindow.innerWidthは、iphoneでは、有効でなく正常な数値が表示されない。screen.widthであれば、正確な数値が表示される②android2以前の場合には、viewportタグは、効かない。android3以降であれば、viewportタグは有効である。
モバイル端末の販売特性から、android2搭載のタブレットは、現在（平成２８年時点）、ごく少数と推定されるため対象外とする
android2,android1搭載のタブレットについて、上記と同じようにパソコン用ＣＳＳ適用するには、dpx比（デバイスピクセル比）をjavascriptで把握して、幅を、dpx比で修正した 数値とするしかないが、ページ遷移の際の作動が極めて不安定となり、ブラウザが対応しきれない。
同業者の皆様へ
パソコンとタブレットは、同じスタイルシートでスマホのみ専用のスタイルシートを適用するために使用しているjavascriptは、次のとおり非常に簡単です。自己責任でご利用ください。 （現在、スマホでは、550pxもの幅がある機種はないはずです））遊び心で、このページで右クリックすると、w3cshoolのトップページへwindow.location.hrefで飛ぶようにしておりますが、全く他意はありません。
ソースコードをご覧になりたい方は、弊社のPHPサンプルページ（上から３つ目）にて、URLをコピペされれば可能です。 このページのみ、こんなアホでばかばかしいことをことをしているのは、弊社サイト内の他ページのjavascriptをコピペ使用される際に、googleのアクセス解析用タグをうっかり消し忘れる方が相当数おられるからです。当方のgoogle analyticsに反映されてしまいます。
弊社サイト内のjavascriptのコピペ使用は、全く構いませんが、googleのアクセス解析用タグの消し忘れには、くれぐれもご注意下さい。 また、PHPにつきましても、このブログで、コードを公表していますのでご参考にしてください。