1

OK、それで私はこのhtmlテンプレートを設定しました。これにより、アニメーション化されたhtml広告をiPadに表示できます。基本的に、メディアクエリを使用してデバイスの幅を決定し、（cssを使用して）「portrait」または「landscape」divを表示します。ポートレートとランドスケープのdivはどちらも、それぞれの向きの広告を含むiframeを格納しています。

何らかの理由で、デバイスの向きを変更してもAdobeEdgeを使用して作成された広告が再生されないという問題が発生しています。私が達成したいと思っているのは、デバイスの向きが変更されたときにhtmlページ全体またはiframeのコンテンツのいずれかを強制的に更新して、広告を再表示することです。

私のコードは次のとおりです。 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link href="http://www.calgaryheralddigital.com/creative/ads/general/reset.css" rel="stylesheet" type="text/css" media="screen">
<link href="http://www.calgaryheralddigital.com/creative/ads/general/clickTags.css" rel="stylesheet" type="text/css" media="screen">

<!-- orientation handler -->
<style type="text/css" media="all and (min-width: 1px) and (max-width: 800px)">
    #portrait{ display:block; }
    #landscape{ display:none; }
</style>
<style type="text/css" media="all and (min-width: 800px) and (max-width: 1500px)">
    #portrait{ display:none; }
    #landscape{ display:block; }
</style>
</head>

<body>
<div id="landscape">
    <div style="z-index:1; position:relative;">
        <iframe src="http://www.calgaryheralddigital.com/creative/ads/client/filename.html" width="1024px" height="90px" frameborder="0">
        <p>Your browser does not support iframes.</p>
        </iframe>
    </div>
    <div id="bannerLand">
        <a href="%cINSERT URL HERE">
            <img src="http://www.calgaryheralddigital.com/creative/ads/general/trans.gif" width="1024" height="90"/>
        </a>
    </div>
</div>
<div id="portrait">
    <div style="z-index:1; position:relative;">
        <iframe src="http://www.calgaryheralddigital.com/creative/ads/client/filename.html" width="768px" height="90px" frameborder="0">
        <p>Your browser does not support iframes.</p>
        </iframe>
    </div>
    <div id="bannerPort">
        <a href="%cINSERT URL HERE">
            <img src="http://www.calgaryheralddigital.com/creative/ads/general/trans.gif" width="768" height="90"/>
        </a>
    </div>
</div>
</body>

</html>

よろしくお願いします！

4

1 に答える 1

2

私は実際に、別のスタックオーバーフローの質問から引き出したコードを使用してこの問題を自分で解決することができました： 向きの変更時にWebページを再レンダリングする最良の方法は何ですか？

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    window.location.reload()
}, false);
于 2012-07-03T15:09:11.853 に答える