レスポンシブ サイトを設計し、jssor スライダーを使用しています。スライダーは応答性が高く、頭の中で次のようにうまく機能します。
<meta name="viewport" content="width=device-width>
以下のようにこのスニペットを編集すると、iOS でデバイスを横向きから縦向きに (またはその逆に) 回転させたときに、スライダーのサイズが適切に変更されません。
<meta name="viewport" content="width=device-width, initial-scale=1">
横向きのときに iOS がズームインしないようにしようとしています。
iOS デバイスまたはシミュレーターでこのページを開き、デバイスの向きを前後に変更すると、この問題の例が表示されます。スライダーは、横向きと縦向きの両方で適切に開いたりロードしたりします。問題は、デバイスが回転している場合のみです。
これは、サイズ変更/応答性を制御するスクリプトの一部です。
$JssorSlider$("slider2_container", options);
function ScaleSlider() {
var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider2.$ScaleWidth(Math.min(parentWidth, 1024));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
});