iPhone6 / iPhone6 Plusの登場により
Webサイトを作る上で今まで以上に画面サイズのバリエーションを
数多く想定しなくてはならない状況になってきました。
中でも「iPhone6 Plus」は解像度が1920×1080と大きく、
タブレットに近いサイズにまでなっており
この先、Webページを作成する際に「iPhone6 Plus」だけに
特定の処理を加える必要性が出てくることが多くなりそうなので
JavaScriptとCSSそれぞれで「iPhone6 Plus」を判別する方法をあれこれメモ書きしてみます。
JavaScript（jQuery）とCSSでiPhone6 Plusを判別するいろいろ
まず初めにJavaScriptで「iPhone6 Plus」かどうかを判別させる処理から。
「iPhone6 Plus」ではデバイス上で1pxが何pxでレンダリングされるかを表す
「devicePixelRatio」の値が「3」になるので、その値を見て判別させます。
※因みに「iPhone6/5/5s」の「devicePixelRatio」の値は「2」
◆SCRIPT
if(navigator.userAgent.indexOf('iPhone') > 0){
if(window.devicePixelRatio == 3) {
alert('iPhone6 Plus!!'); //「iPhone6 Plus」処理
}
}
「JavaScriptで「iPhone6 Plus」を判別」サンプルを別枠で表示
「iPhone6 Plus」の場合のみアラートを表示させるサンプルです。
（「iPhone6 Plus」以外では何も起きません）
2014年11月18日現在、iPhone端末で「devicePixelRatio」の値が「3」なのは
「iPhone6 Plus」だけなのでこの処理で判別させることができますが
将来、新たな端末が発売された際には「iPhone6 Plus」の判別、
という形ではならなくなる可能性がありますのでご注意ください。
JavaScriptで「iPhone6 Plus」の縦向き（portrait）／横向き（landscape）を判別
「iPhone6 Plus」の判別に加えて
画面が縦向き（portrait）になっているか
横向き（landscape）になっているか
を判別させます。
◆SCRIPT
if(navigator.userAgent.indexOf('iPhone') > 0){
if(window.devicePixelRatio == 3) {
window.onorientationchange = setView;
setView();
function setView(){
if(window.orientation == 0){
alert('portrait：縦向き'); //「iPhone6 Plus」縦向き処理
} else {
alert('landscape：横向き'); //「iPhone6 Plus」横向き処理
}
}
}
}
「JavaScriptで「iPhone6 Plus」の縦向き（portrait）／横向き（landscape）を判別」サンプルを別枠で表示
「iPhone6 Plus」で縦／横画面を切り替えるたびに
どちらの向きになっているかアラートを表示させるサンプルです。
（「iPhone6 Plus」以外では何も起きません）
jQueryを使って「iPhone6 Plus」の横向き（landscape）の場合のみbodyにクラスを追加
上記の縦向き／横向きの判別に加えて
jQueryを使って横向きの場合のみbodyにクラスを追加させてみます。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
var lsClass = 'ip6landscape';
if(navigator.userAgent.indexOf('iPhone') > 0){
if(window.devicePixelRatio == 3) {
window.onorientationchange = setView;
setView();
function setView(){
if(window.orientation == 0){
$('body').removeClass(lsClass);
} else {
$('body').addClass(lsClass);
}
}
}
}
});
</script>
「jQueryを使ってiPhone6 Plusの横向き（landscape）の場合のみbodyにクラスを追加」サンプルを別枠で表示
「iPhone6 Plus」で画面を横向きにさせると
「var lsClass」で設定したクラス名（サンプルでは「ip6landscape」）がbodyに付与され
縦向きにするとクラスは削除されます。
サンプルでは「iPhone6 Plus」が縦画面の場合には、bodyの背景が白、テキスト色が黒になり、
横画面の場合にはクラス「ip6landscape」が付与され、bodyの背景が黒、テキスト色が白になります。
（「iPhone6 Plus」以外では何も起きません）
JavaScriptを使っての判別については以上です。
ここからはCSSでの判別について。
CSSのみで判別する場合は「iPhone」のみ、といったユーザーエージェント判別は難しいので
「devicePixelRatio」の値のみの判別になります。
※iPadやAndroidの「devicePixelRatio」が「3」になる端末も対象になります。
CSSで「iPhone6 Plus」を判別
CSSのMedia Queriesで「devicePixelRatio」の値を見て
「3」のものに対して「iPhone6 Plus」用の処理を加えます。
◆CSS
@media screen and (-webkit-device-pixel-ratio:3) {
body {
color: #fff;
background: #333;
}
}
CSSで「iPhone6 Plusを判別」サンプルを別枠で表示
「iPhone6 Plus」の場合のみbodyの背景が黒、テキスト色が白になります。
（「iPhone6 Plus」以外ではbodyの背景が白、テキスト色が黒）
CSSで「iPhone6 Plus」の縦向き（portrait）／横向き（landscape）を判別
「iPhone6 Plus」の判別に加えて
Media Queriesで画面が縦向き（portrait）になっているか
横向き（landscape）になっているか
を判別させます。
◆CSS
@media screen and (-webkit-device-pixel-ratio:3) and (orientation: portrait) {
body {
color: #fff;
background: #333;
}
}
@media screen and (-webkit-device-pixel-ratio:3) and (orientation: landscape) {
body {
color: #000;
background: #ccc;
}
}
CSSで「iPhone6 Plusの縦向き（portrait）／横向き（landscape）を判別」サンプルを別枠で表示
「iPhone6 Plus」で縦画面の場合には、bodyの背景が黒、テキスト色が白になり、
横画面の場合には、bodyの背景が灰色、テキスト色が黒になります。
（「iPhone6 Plus」以外ではbodyの背景が白、テキスト色が黒）
以上が、JavaScriptとCSSを使って「iPhone6 Plus」を判別して
いろいろと処理を切り替えてみるサンプルでした。
実際は「iPhone6 Plus」を判別する必要もなく
Mediaクエリーのサイズの調整等だけですんでしまう事の方が多いかもしれませんが
「iPhone6 Plus」を判別させる必要に駆られた際にぜひ。。。