前回、JavaScriptで動く将棋の棋譜再生盤Kifu for JSをWordPressの投稿ページに表示させる手順について書いてみたがパソコンでは、正常に表示させることができたものの、iPhone6sでは表示が画面からはみ出てしまい、うまく表示できなかった。
パソコンやタブレット、スマートフォンのどのデバイスでもうまく表示させるように設計されたウェブデザインをレスポンシブウェブデザインというらしいのだが、今のところ自動的に表示できることはできていない。しかし、将棋盤の縮小表示はできるようである。
参考にさせて頂いたのは、「Kifu for JSをブログに貼り付ける」で以下のようなタグ中に縮小率を記載したところ、iPhone6sでもうまく表示させることができた。このページをiPhone6sでうまく表示させるには、60%表示にさせる必要があった。
Kifu for JSの将棋盤のサイズは、Chromeのデベロッパー・ツール（F12キーを押すと起動）で確認したところ、縦570px、横536pxとなっていた。
このサイズそれぞれに縮小率を掛けて将棋盤を表示させてみた。iframeタグを使っているので再生ボタンを連続で押しても画面が拡大してしまうことはなかった。同じ方法でResponsive-Kifuも表示できると思う。
iPhone6sだと55%表示がちょうど良かったが、「Kifu-for-JSをWordPressのブログに貼り付ける方法」で紹介されているようなKifu for JSをWordpressのブログに貼り付けるためのプラグインの表示のように駒台が将棋盤の左右でなく、上下に表示できれば一番良いと思う。
100%表示
<div style="width:570px; height:100%; overflow:hidden;"> </div>
90%表示
<div style="width:570px; height:90%; overflow:hidden;"> </div>
80％表示
<div style="width:570px; height:80%; overflow:hidden;"> </div>
70%表示
<div style="width:570px; height:70%; overflow:hidden;"> </div>
60%表示（iPhone6sのブラウザSafariでこのページを表示させたらサイズがぴったりだった。）
<div style="width:570px; height:60%; overflow:hidden;"> </div>
50%表示
<div style="width:570px; height:50%; overflow:hidden;"> </div>