Viewportとメディアクエリ

 iPhone6plusとか出ちゃって、PC、タブレット、スマートフォンでのレスポンシブデザインのメディアクエリ分けをどうするかで散々悩んだ挙句、ようやく収束しつつあるのでメモ。

 まずviewportから、

 コレ一択。拡大させたくない場合は user-scalable=no を加えればいいが、ボクみたいな老眼の人には迷惑この上ないのでできれば避けたい。
 width=640 とかやってた時期もあって、iPhoneはそれで良かったのだけど、iPadはphpレベルで width=980 とか対応しなくてはいけなかったり、古いAndroidが壊滅状態だったので2度と使わないことにした。

 メディアクエリは、PC/タブレット/スマートフォン対応のレスポンシブが、

 スマートフォンやタブレットを横にした時に無駄に大きくなるのが非常に不愉快だったので試行錯誤の結果こうすることにした。
 動作としては次のようになる

iPhone3/4(320×480) → 縦でPhone, 横もPhone
iPhone5(320×568)/6(375×667)/6plus(414×736) → 縦でPhone, 横でTablet
iPad/iPad mini(768×1024) → 縦でTablet, 横でPC
iPad PRO(1024×1366) → 縦でPC、横もPC

 max-width になってるのは、PCでも確認できるようにするためで、完全にPCと分けたい場合は max-device-width にする。

 タブレットのmax-widthが999pxになっているところは、横幅1000pxでPCサイトを構築するのが一般的になりつつあるのでこの数値に。ヘッダーやフッターの幅によって変更するのもアリだが、必ず768px以上にすること。
 Androidも基本コレでいける。ただ、モノによってはdevice-widthがとんでもない数字になってるタブレットとかもあったりするけど、それはボクのせいじゃないので無視することにした。そういうの使ってる人はほかのサイトでもおかしくなってるだろうし。

 このメディアクエリで面倒なのは、phpやJavaScriptで、表示する画像やサイズ指定を変えていたり、表示/非表示を切り替えてる場合など、CSSでは切り替えできない要素。これはresizeイベントできちんと対応する必要があるのでがんばるしかなさ気。
 例として一番あるのがヘッダーの切り替え。PCの場合はメニューをずらっと並べ、タブレットやスマートフォンだとメニューアイコンにしてクリックでメニューが出るタイプなんかは、スマートフォンやタブレットを横から縦にした時にメニューが消えたままになったりするので注意する。PCでのレスポンシブ表示も同様。

ちなみに、タブレットでPCページを表示したい場合は、

とする。

シェアボタンの設置

facebook、twitter、LINEのシェアするボタンを設置する際のメモ。

facebookの「いいね!」ボタン

OGタグを記述。

「いいね!」ボタン横のカウンタは、[シェアURL]を元にカウントする点に注意。
ページ内に複数設置する場合は、それぞれのボタンが指すシェアURLは必ず存在しなければならない。
OGタグを書き換えてもすぐには反映されないので、facebookの Object Debugger でキャッシュをクリアする。

fb-root要素とJavaScriptを記述。
記述する場所はBODYタグ内が良いらしい。

ページ内に複数設置する場合でも、一つだけ記述しておけばOK。
[アプリケーションID]は facebook developers で取得したものを記述する。

ボタンを設置

twitterの「ツイート」ボタン

JavaScriptを記述。

ページ内に複数設置する場合でも、一つだけ記述しておけばOK。
記述する場所はBODYタグ直後が良いらしい。

ボタンを設置

投稿URLとシェアURLの違いは、前者が単に投稿に追懐されるURLで、後者はツイートボタン横に表示されるカウンタの対象となるURLを指す。ボタンを設置しているURLがシェアしたいURLと同じ場合は、シェアURLは必要ない。

LINEの「ラインで送る」ボタン

JavaScriptを記述。

ボタンを設置。

詳しくは 公式ページ を見たほうが早い。

ただ上記設置方法は、ボタン画像が公式のものだったり、設置したページのURLがそのまま使われるので、ページ内に複数設置したい場合や、ボタン画像をオリジナルにしたい場合は以下の書式で記述する。この場合、JavaScriptの記述は必要ない。

[投稿テキスト]はURLエンコードが必要。
公式画像は ココ の一番下にある 「ボタン画像をダウンロード」 から。

Just another WordPress site