とりあえず画像を見て下さい。
求めてない現象
求めている現象
なぜこの現象が起きたのか？
スマホ向けサイトのコーディングする際にデバイスごとの画面幅に対応させる一つの手段として
$(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