iPhone 5S 以前だけでなく、iPhone 6 や iPhone 6 Plus でも幅320pxでスケールを固定する方法

iPhone 5S あるいはそれ以前の端末において、meta要素を使って幅320pxでスケール固定を実現していた方は iPhone 6 と iPhobe 6 Plus の device-width が変更されたことでお困りかもしれません。この記事ではmeta要素の内容を動的に書き換えることで、iPhone 6 と iPhone 6 Plus でもこれまで同様に、幅320pxでスケールを固定するためのサンプルプログラムを示します。

iPhone 5S あるいはそれ以前の端末で、

  • 幅320px固定
  • 拡大縮小を無効化

のために

<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万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*