여기에서 딱 맞는 코드를 찾았다고 생각했는데.. 안됨 ..
아이폰 6에서 사이즈가 375로 나와야 하는데 980?이렇게 나옴.
<script>
jQuery(function($){
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());
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';
// var vpSp = 'width=414px,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';
// var vpSp = 'width=375px,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';
}
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+ '">');
}
$(window).on("load orientationchange 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>
iPhone 5S あるいはそれ以前の端末において、meta要素を使って幅320pxでスケール固定を実現していた方は iPhone 6 と iPhobe 6 Plus の device-width が変更されたことでお困りかもしれません。この記事ではmeta要素の内容を動的に書き換えることで、iPhone 6 と iPhone 6 Plus でもこれまで同様に、幅320pxでスケールを固定するためのサンプルプログラムを示します。
iPhone 5S あるいはそれ以前の端末で、
のために
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=0" />
のように書いていると iPhone 6 や iPhone 6 Plus で表示崩れしているのではないでしょうか。
表示崩れの原因と対策は以前
iPhone 5Sだと鮮明なのに、iPhone 6とiPhone 6 Plusだと不鮮明?!もしくはデザイン崩れ?!
でお話した通りです。
しかし、端末毎に device-width が以下のように異なるため、
表示のスケールを固定する場合にはもう一工夫必要です。
- iPhone 5S あるいはそれ以前
- device-width : 320px
- iPhone 6
- device-width : 375px
- iPhone 6 Plus
- device-width : 414px
iPhone 5S (device-width:320px) あるいはそれ以前で言うところの
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=0" />
と対応するのは
iPhone 6 (device-width:375px) では
<meta name="viewport" content="width=320, initial-scale=1.171875, maximum-scale=1.171875, user-scalable=0" />
iPhone 6 Plus (device-width:414px) では
<meta name="viewport" content="width=320, initial-scale=1.293750, maximum-scale=1.293750, user-scalable=0" />
となります。
よって、
縦長 (portrait) で 幅320px のスケール固定を、
meta要素で実現するのであれば、
meta要素のcontent属性を
以下のようなプログラムで動的に書き換えます。
(function($){
$(document).ready(function(){
var normalizedWidth = 320;
var normalize = function(){
if (window.navigator.userAgent.toLowerCase().indexOf('iphone') == -1) return;
if ((window.orientation != 0 && window.orientation != 180)) return;
var scale = $('body').width() / normalizedWidth;
if (scale == 1) return;
var content = 'width='+normalizedWidth+', initial-scale='+scale+', maximum-scale='+scale+', user-scalable=0';
$('meta[name=viewport]').attr('content', content);
}
$(window).on('orientationchange',normalize)
$(window).trigger('orientationchange');
});
})(jQuery);
以上、お役にたてば幸いです。
お問い合わせについて
業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
※ご契約前のコメントやメールでのやりとりは無料です。