こんにちは。一ヶ月ほど前にiPhone6無印を支給されたトランスビットの中の人です。
外）「これで、い つ で も 実機で確認できるから」
中）「……そうですネ（外堀埋められた気分）」
さて、レスポンシブで組むのに慣れてきたと思っていても、色々な問題に出くわします。
その度にちぎっては投げ、ちぎっては投げ……今回はiPhoneのviewport絡みです。
基本的にトランスビットの外の人は幅320pxでスマホ用縦デザインをあげてきます。
いつももっと大きいけど、仮にPC用デザインは幅1024pxとし、画面サイズ480px（スマホ横）からはPC用デザインで表示するとしましょう。
iPhone5以下、6、6+でそれぞれ画面幅が違うので、各デバイスで同一表示になるよう調整します。
※Androidぶったぎりコード
jQuery(function($){
/* ==============================================================================
0. ユーザーエージェントタブレット・スマホの二極で取得
================================================================================ */
var _ua = (function(u){
return {
Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1)
|| u.indexOf("ipad") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
|| u.indexOf("kindle") != -1
|| u.indexOf("silk") != -1
|| u.indexOf("playbook") != -1,
Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
|| u.indexOf("iphone") != -1
|| u.indexOf("ipod") != -1
|| (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
|| (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
|| u.indexOf("blackberry") != -1
}
})(window.navigator.userAgent.toLowerCase());
/* ==============================================================================
1. まずはviewportの変数を設定
================================================================================ */
if(navigator.userAgent.indexOf('iPhone') > 0){
// iPhoneの場合
if(window.devicePixelRatio == 3) {
// iPhone6+
var vpSp = 'width=320px,initial-scale=1.293750,maximum-scale=1.293750,user-scalable=0';
}else if(window.devicePixelRatio <= 2){
// iPhone6以下なら
var height_num = screen.height * window.devicePixelRatio;
if( height_num > 1136){
// iPhone6
var vpSp = 'width=320px,initial-scale=1.171875,maximum-scale=1.171875,user-scalable=0';
}else{
// iPhone5+以下
var vpSp = 'width=320px,initial-scale=1,maximum-scale=1,user-scalable=0';
}
}
}else{
// iPhoneに非ず
var vpSp = 'width=320px,initial-scale=1, maximum-scale=1, user-scalable=0';
}
/* ==============================================================================
2. 次に、viewportの設定
================================================================================ */
var vpPc = 'width=1024px';
if(_ua.Mobile){ // スマホ用viewportの設定
// 初期設定
$('head').prepend('<meta name="viewport" content="' + vpSp + '">');
$(window).on("orientationchange", function() {
// 傾き検出
if(Math.abs(window.orientation) === 90) {
// 横向き
$('meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="' + vpPc + '">');
} else {
// 縦向き
$('meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="' + vpSp + '">');
}
});
}else{ // PC用viewportの設定
// 初期設定
$('head').prepend('<meta name="viewport" content="' + vpPc+ '">');
}
/* ==============================================================================
3. 最後に、ウインドウリサイズ時のviewportの設定
================================================================================ */
$(window).on("resize", function() {
if( window.matchMedia("(max-width: 479px)").matches ){
$('meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="' + vpSp + '">');
}
if( window.matchMedia("(min-width: 480px)").matches ){
$('meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="' + vpPc + '">');
}
});
});
色んな方が書いてくださったscriptを、適当に繋ぎ合わせて動かしてるんですが……。
↓↓ いつも一方的に勝手にお世話になっていて、今回もお世話になった方々のブログ記事 ↓↓
・2015年版JavaScriptユーザエージェント判別・判定
・JavaScript（jQuery）とCSSでiPhone6 Plusを判別するいろいろ
・iPhone 5S 以前だけでなく、iPhone 6 や iPhone 6 Plus でも幅320pxでスケールを固定する方法
みんなこういうのどうしてるんだろう……もしかして、もっとスマートな方法があるんだろうか。
ハナからリキッドデザインなんだろうか……。
ちなみに、私はこのコードの中にハンバーガーメニュー用のスライドトグルを初めとし、「スマホデザインで使う関数や色々」とか、「PC用で使う諸々」とかも、2のとこで一緒にぶち込み、ごった煮にしてます。
今更ながら、$(‘meta[name=viewport]’).remove();から$(‘head’).prepend～の下りを、attrで処理した方が数行稼げる気もするのですが、明日にしてもう寝ます。
ちなみに…。
$(window).on("load orientationchange resize", function() {}
こんな風に、ロードもリロードも傾き変化も、全部くくってしまうと設定がまとまって見やすいです。
何故か、後々別々にわけて動かす必要性が出てくるんですけどね……私だけ？
