スマホでピンチアウトしたのち、デフォルトに戻す方法

Question

スマホで、ピンチアウトした後、Javascript で一発で元のscaleに戻すにはどうしたらいいですか。

なお、index.phpでは、

  <meta name="viewport" content="width=device-width, initial-scale=1" , viewport-fit=cover">

と指定しています。

var metalist = document.getElementsByTagName('meta');
for(var i = 0; i < metalist.length; i++) {
    var name = metalist[i].getAttribute('name');
    if(name && name.toLowerCase() === 'viewport') {
        metalist[i].setAttribute('content', 'width=device-width,initial-scale=1.0');
        break;
    }
}

とかやってみましたが、効きませんでした。

なお、試した端末は、iOSです。

Answer 1

そもそもmeta viewportの意味を理解した方が良いと思います
もう逃げない。HTMLのviewportをちゃんと理解する

実現したいことができそうな記事
ピンチイン・ピンチアウトでズームする方法

Comments

[yiwsk]

ありがとうございます。

「もう逃げない。HTMLのviewportをちゃんと理解する」を読んでみました。ちゃんと理解できたかどうか分かりませんが、その中にある
document.getElementById('viewport').setAttribute('content', 'width=360,initial-scale=1');
は効きませんでした。

｢ピンチイン・ピンチアウトでズームする方法｣は、確かに使えそうですが、｢難易度は高く、タッチした位置の取得方法など基本的な知識がある方を前提にしています｣とあるとおり、私には敷居が高いです。

PhotoSwipeを使いたいのですが、アプリで使っているjQueryMobileと相性が悪いのか、うまく動きませんでした。再度試してみることも選択肢の一つですが、かなりの試行錯誤が必要な感じです。

やむを得ないので、基本はピンチ操作を不可にしておいて、画像をタップしたら、ピンチ操作ができるようにして、再度タップしたら、ピンチ不可に戻しているのですが、画像を拡大した状態で画像をタップしてピンチ不可にすると、大変困った状態になります。これを改善したいのです。

viewportを動的に変化させるコードは、｢スマホでピンチアウトして拡大した時に、一撃でデフォルトサイズに戻す方法｣等、色々とググって試してみましたが、すべて効きませんでした。そもそもピント外れのことを試みているのか、コードの実装が間違っているのか、分からず困っています。