私はモバイルサイトの開発に慣れていないので、我慢してください。現在、私のサイト(http://farhillsanimalclinic.com/mobile)はAndroidで動作しているようですが、Safariで問題が発生しています。縦向きから横向きに変更すると、すべてが適切にサイズ変更されますが、横向きから縦向きに切り替えると、要素のサイズが変更されません。一時的にアラートを追加したため、サイズ変更関数が呼び出されていることはわかっていますが、正しく機能していないようです。私が言ったように、それはAndroid携帯電話でうまく機能します。
関連するコードは次のとおりです。
function getWidth() {
xWidth = null;
if(window.screen != null)
xWidth = window.screen.availWidth;
if(window.outerWidth != null)
xWidth = window.outerWidth;
return xWidth;
}
function getHeight() {
xHeight = null;
if(window.screen != null)
xHeight = window.screen.availHeight;
if(window.innerHeight != null)
xHeight = window.innerHeight;
return xHeight;
}
function resizeWrapper() {
xWidth = getWidth();
xHeight = getHeight();
$("#wrapper").css("width", xWidth + "px");
$("#wrapper").css("min-height", xHeight + "px");
}
$(window).bind('orientationchange', resizeWrapper);
$(window).bind('resize', resizeWrapper);
重要な場合は、ビューポートを定義するために以下を使用しています。
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=1" />