Help us understand the problem. What is going on with this article?

スマホ向けサイト作りをしている時。ズームを使うとSNSボタンが荒ぶる

More than 5 years have passed since last update.

とりあえず画像を見て下さい。

求めてない現象

求めてない現象.png

求めている現象

求めている状態.png

なぜこの現象が起きたのか?

スマホ向けサイトのコーディングする際にデバイスごとの画面幅に対応させる一つの手段として

$(window).bind('resize load', function(){
    $("html").css("zoom" , $(window).width()/480 );
});

このような記述をすることがあります。
480pxを基準に現在の画面幅の比率を求めて、htmlに記述されている部分を拡大縮小させているjsになります。

これがSNSボタンの上位のiframeに作用してしまい、求めていない現象が起きてしまいました。

今回これを回避するために

$(window).bind('resize load', function(){
    $("header,article,footer").css("zoom" , $(window).width()/480 );
});

<html>
    <head>
        <!-- その他は割愛 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header></header>
        <!-- ここにSNSボタンを集約 -->
        <div class="snsbuttoms"></div>
        <article></article>
        <footer></footer>
    </body>
</html>

のような記述でSNSの記述部分のズームだけ回避するという方法を用いました。

なぜズーム自体をやめなかったのかという話になりますが、新規で作るわけではなく、とあるサイトの増築という形だったというのが一番大きな要因ですね・・・。

賢い方法をご存じの方は是非ご教授お願いしますm(_ _)m

mmusasabi
(*´д`*)パッション!!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away