なんでもネイティブアプリのUIデザインが1080x1920pxだからと。
えーまじで、と。iPhone6+なら1242x2208pxでないの？と。
Webでそんな数字聞いた事ないんだけど今ってどうなの？と思ってググってみたんだけども
やっぱりWebだと1080なんてのはないなあと思い知らされた。
とはいえ時間もないし強引にやってみることにした。
デザインをみたら画像しかなかったので、1080x1920pxの等倍で画像切り出したりマークアップしたりして普通にサイト作った後に、CSSとJSで拡大縮小のおまじないかけて強制的に画面にフィットさせるという古典的手法を取った。
iPhoneを含めて大体の最新端末にはviewportを操作すれば何とかなる感じであります。
var sw = $(window).width() ;
var scale = sw/width;
// scale = Math.min(scale, 1);
$('meta[name=viewport]').attr('content', 'width=device-width,initial-scale='+ scale +',minimum-scale='+ scale +',maximum-scale='+ scale +',user-scalable=no');
そびえ立つクソと名高いAndroidブラウザでも4.4以上ならChrome様がデフォルトで内蔵されているので昔ほど酷い有様にはならない(※Galaxy S系は除く）が、4.0以上であってもデフォルトブラウザは相変わらず不具合が多いので、viewport操作は出来ないと思った方が無駄なストレスを抱えなくて済みます。
Androidのデフォルトブラウザはviewportの挙動に難が多く、4.0超えていようがいまいが関係なく端末毎に意味不明な挙動をするので、viewportに関しては窓から投げ捨ててzoomを使う方が早い。
ならiOSもzoomで・・・と思うじゃん？ところがどっこい、iOSのSafariにはzoomでフォントサイズが狂うというおかしなバグがあるのでviewport操作しか使えないのだ。
var scale =$(window).width()/width;
//scale = Math.min(scale, 1);
$("html").css("zoom" , scale );
またwindow.screenに関しても取れない端末があったので、window.innerWidthを使う方がよさそうだった。
これらを使い分ける判別はざっくりと、iPhoneかAndroidのChromeか、これでいこう
if ( (userAgent.indexOf('iPhone') > 0) || (userAgent.indexOf('Android') > 0 && userAgent.indexOf('Chrome') > 0)){
trueならviewport操作、falseならzoomとしておけば、PCまでカバーできるはず。
フックするイベントはresizeとorientationchangeで
$(window).on('resize, orientationchange', function() {
var sw = (Math.abs(window.orientation) === 90) ? window.screen.height : window.screen.width;
var scale = sw/width;
// scale = Math.min(scale, 1);
$('meta[name=viewport]').attr('content', 'width=device-width,initial-scale='+ scale +',minimum-scale='+ scale +',maximum-scale='+ scale +',user-scalable=no');
});
window.onloadだと遅いんでdomreadyの次点で１回実行しておいたほうがいいと思う。
フォントはremとかで相対指定しておいてbodyのフォントサイズ操作になるかな。
まだテキストないから机上論ですが、それで調整はなんとでもなるはず。
この方法を使うとFacebookのいいねボタンとかTwitterのツイートボタンのサイズが盛大に狂う。
基本的には縮小してる分拡大すれば元のサイズくらいになります。
var width = 1080;
var sw = $window.width() ;
var zoom = width/sw;
$('#sns').css({
'-webkit-transform': 'scale('+ zoom + ')',
'transform': 'scale(' + zoom + ')'
});
$("#sns").css("zoom" , zoom );
transform:scaleで拡大縮小する場合、originの指定を忘れると行方不明になるので注意。
floatなどを使っている場合はfloatに合わせた方がいいですが、それ以外はleftでおk。
拡大縮小の挙動がおかしいときは、要素全部対象にするのをやめて、ボタンをdivの子要素にして親にしたdivにスタイルをかけると解消する場合があります。
JSで叩かれた後に出現するiframeを直接貼付けて使うっていう手もあり、１回ウィジェットを普通に貼付けてからDOMを見て、要素のルートにあるiframeをコピペした後、不要なモノを削ったりテンプレートの変数入れたりすれば、zoomで狂わない代物が手に入ります。でも邪道なのでｵｽｽﾒはしない。
フォントサイズについて
html {
font-size: 62.5%
}
body {
3.2rem
}
ルートを62.5%にしておけば、remの指定がデザイン上の10px＝1rem相当にできるので
Photoshopで32pxの指定だったとしたらCSSでは3.2remで同等のサイズを得られる。