logwのSNSアイコンはSVGを使っています。今までAndroidもSafariも問題なくみれていたのですが、ある日突然Safariだとアイコンが豆粒みたいな小ささになりました。

WordPress5.5以降だとなる？

WordPress5.5, SVGの画像が小さく表示されるのを直すだとどうやらWordPress5.5以降はSVGが小さく表示されるっぽいです。自分のサイトも突然なったので、これなのかな？と勝手に思いました

widthとheightのサイズがおかしい

記事にあるように

原因は、のwidth, height属性値が小さくなるから。HTMLはこんな感じになります。
SVG画像のサイズがデフォルトで 60～70前後になるらしい。小さすぎます。

とあります。実際にlogwのサイトでもiOSで見ると70px近くとかなり小さくなってました

該当箇所コード

<li>
<a class="twitter-button" href="https://twitter.com/share?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" ><img src="<?php echo get_template_directory_uri(); ?>/images/common/up_twitter.svg" width="210" height="60"></a></li>
<li>
<a title="facebookでシェアする" href="http://www.facebook.com/sharer.php?u=<?php echo("https://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>&t=<?php echo trim(wp_title( '', false)); ?>" target="_blank">
<img src="<?php echo get_template_directory_uri(); ?>/images/common/up_facebook.svg" width="210" height="60"></a></li>
<li>
<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/common/up_line.svg" width="210" height="60"></a>
</li>

となってました。Androidなどでは問題なく見れるのですがiPhoneのiOSだとアイコンが異常に小さくなります。

WordPressが原因？

正直WordPressが原因なのか？と言われるとわからないといのがあります。ただ今回は違うのではないかなと思います。

WordPressのSVGサポートはアップロードの問題

WordPressのSVG問題はアップロードできないなどの問題です。logwではテーマにSVGを入れているのでアップロード機能はつかっていません。なので関係ないかなと

iOSをアップデートしてから起きた可能性もある

ある日突然小さく表示されるようになったのですが、そもそもこれはiOSをアップデートした事でおきた可能性も否定できません。気づいたらおきているため。また、PC版のSafariではSVGの画像を問題なく表示できていました

iPhoneのSafariの問題となります

解決策

結論：スタイルシートにサイズを指定

これだけです

.blog_info{
  li{
    display:inline;
    font-size:@text_font_side*10;
          width: 210px;
          height: 60px;
          img{
              margin-bottom: 0;
              width: 100%;
          }
  }
}

※該当箇所ののみ抜粋

これでSVGがちゃんと表示されるようになりました。もしSVGがうまく表示されないって方は参考までに