【レスポンシブ。iPadでPCと同じレイアウトにする方法】 - Webサイト専門プログラマの言いたい放題

f:id:wp-lesson:20160902163720j:plain

レスポンシブなサイトを作るとき、　
工数や予算の関係で、iPad向けの表示まで
最適化することができない（手が回せない）
場合の１つの対処法です。
　
　
━━━━━━━━━━━━━━━━━━━━
基本方針
━━━━━━━━━━━━━━━━━━━━
　
　
iPadで表示した場合はPCで表示した場合と
同じレイアウトで、単純に縮小した表示に
するという妥協案です。
　
━━━━━━━━━━━━━━━━━━━━
（方法１）サーバー側のプログラムで対応
━━━━━━━━━━━━━━━━━━━━
　
PCやiPadなどについているブラウザから
サイトにアクセスすると、ウェブサーバーに
　
「私はPCですよ」とか、
「私はiPadですよ」という情報が送られます。
　
これをユーザーエージェントと言います。
　
そこで、
　
PHPなどサーバー側で動くスクリプト言語を
使って、ユーザーエージェントを読み取ります。
　
すると、
　
今PCからアクセスされているのか、
iPadからアクセスされているのか、
という判断をすることができます。
　
そして、
　
iPadからのアクセスならば、
　

<meta name="viewport" content="width:1024">

　
（数値の部分は調整すること）
　
がHTMLに書き込まれるようにし、
スマホからのアクセスならば、
　

<meta name="viewport" content="width:device-width">

　
がHTMLに書き込まれるようにします。
　
━━━━━━━━━━━━━━━━━━━━
（方法２）ブラウザ側のプログラムで対応
━━━━━━━━━━━━━━━━━━━━
　
PHPわかんない、サーバーわかんない、
でもJavaScriptならわかる。
　
という場合は、
　
JavaScriptでユーザーエージェントを読み取り、
方法１と全く同じことをすればOKです。
　
━━━━━━━━━━━━━━━━━━━━
（方法３）プロに相談（笑）
━━━━━━━━━━━━━━━━━━━━
　
JavaScriptわかりません、
でも自分のサイトのために勉強する気は
あります。
　
という方は、いくらでもレッスンさせて
いただきますのでご相談ください。
　
━━━━━━━━━━━━━━━━━━━━
　
コピペしてもっていけるコードは出しません。
　
仕組みがわからないものをコピーしても、
自力で解決する力が伸びないからです。
　
たくさんの人に、できなかったことをできる
ようになる楽しさを体験して欲しいなぁと
つくづく思います。