動くCSS機能をiPhoneでも

サイトを巡って多くの可能性のある情報を試したところ、アニメーション関連（@keyframes と animationプロパティ）の CSS だけを別ファイルにして、jQuery で HTML の読み込みが完了してから CSS を読み込むようにすると改善され可能性があることが判明した。

　

jQueryをheader.phpの下部に追加：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
    var style = '<link rel="stylesheet" href="style.css">';
    $('head link:last').after(style);
});
</script>

早速、TwentySeventeen の header.php に記述して試したところ、スライドショーと動画を観ることが出来るようになった。次のステップは「transform: rotateX/rorateY」関係のCSSが効かない問題を解決するだけだね。