読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【レスポンシブ。iPadでPCと同じレイアウトにする方法】

コーディングテクニック

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

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

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

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

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

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

プログラミング的な発想を身に付けて、
作りたいものを作れるように、イメージを形にできるようになりましょう!
 
 
お問い合わせお待ちしております。

↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓

【1】CODEMYマンツーマンレッスン

codemy-lesson.office-ing.net
⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン

▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
 

【2】プログラミング講座CODEMY

office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!