簡単に言うと、私がやろうとしているfont-sizeのは、画面の幅に基づいて3つのdivを設定するjQueryを少し書くことです。
デスクトップのChrome、Safari、Firefoxでコードをテストしましたが、すべて正常に機能しており、スケールアップとスケールダウンがうまく機能しています。iPad（ChromeとSafariの両方）でテストすると、問題なく動作します。しかし、iPhoneでテストすると、すべてがバラバラになります。
ページがSafariに読み込まれると、jsは何も実行しないようで、フォントサイズは変更されません。しかし、奇妙なことに、iPhoneを回転させると、関数を記述していなくても、フォントのサイズが、ページが最初に表示されたときの正しいサイズに変更され.triggerます。
私がさらに困惑しているのは、iPhoneでChromeを使用してWebページを表示すると機能するように見えることです。
私のコードがiPhoneで特に機能したくない理由がわかりません！
これが私のjQueryです
//Gather the screen width and height
var screenwidth = $(window).width();
var screenheight = $(window).height();
// set the width and height of the box based on the screen width and height
var boxwidth = screenwidth - 80;
var boxheight = screenheight - 200;
$("#box").width(boxwidth);
$("#box").height(boxheight);
//center the box along the X and Y axis
var boxX = (screenwidth / 2) - (boxwidth / 2);
var boxY = (screenheight / 2) - (boxheight / 2);
$("#box").css({"margin-top" : boxY});
$("#box").css({"margin-left" : boxX});
//set the font size of each div based on the screen width
var box1font = Math.floor( (screenwidth / 100) * 8.8 );
var box2font = Math.floor( (screenwidth / 100) * 6 );
var box3font = Math.floor( (screenwidth / 100) * 1.6 );
$("#box1").css("font-size" , box1font);
$("#box2").css("font-size" , box2font);
$("#box3").css("font-size" , box3font);
//center the divs within the parent element
var inner = $("#wrapper").height();
var innerX = (boxheight / 2) - (inner / 2);
$("#wrapper").css({"padding-top" : innerX});