iOS10 Safariでuser-scalableが機能しない!

構築・開発スマホ

iOSが本日アップデートされ、わたしも早々にiOS10にアップデートしました。

iOS10のsafariでは、viewport内に、user-scalable=no を入れていたとしても、機能せず、ピンチイン、ピンチアウトが出来てしまいます。
同端末のChromeでは、特に問題なく user-scalable=no が有効でした。

バグなのかアクセシビリティ的に無効にしないほうがよいという考えから仕様になったのか定かではありませんが、バージョンを上げてしまうとズームしてしまうようになります。

どうしても画面を固定してuser-scalable=no を使いたいということであれば、下記Javascriptで、Safariのピンチズーム機能を無効にできます。

<script>
document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) {
        event.preventDefault();
    }
    lastTouchEnd = now;
}, false);
</script>

 

参考サイト

css – disable viewport zooming iOS 10 safari? – Stack Overflow

コメント

スポンサーリンク
タイトルとURLをコピーしました