【追記あり】IphoneのSafariで、iframeタグで表示するPDFが枠に収まらない
ケンブリッジ谷風です。
--
【2019/10/23追記】
本件、Slideshareを経由する、という解決策でいったん解決しました。
当該PDFをSlideshareにアップロードし、それをiframeで読み込む（Youtubeと同じようにSlideshareにも埋め込みタグを生成する機能があります）という考え方です。
ただ、これ、Slideshareがサービス終了したら終わってしまうので、やっぱり恒久的な対応策は知っておきたいですね。
--
普段LPでiframeタグを使ってPDFを表示させてますが、IphoneのSafariだけ、うまく表示できません。
具体的には、
・枠にPDFが収まらない（等倍ではみ出る）
・スクロールできない
です。
LPのURLはこれ<https://pages.ctp.co.jp/why_work_at_cambridge.html >
以下は、Iphoneで表示した際のスクショですが、
「Who is Cambri」というのが、iframeで表示されるべきPDFです。
ネットでググると、いろんな解決策がありますが、そのどれもがうまくいきませんでした。
・CSSで.iframe-wrapを使うべし
・CSSでifrm-containerを使うべし
・objectタグ使うべし
LPのテンプレートのHTMLは以下です（いったん上記のCSS記述は除外してます）
引用ここから--
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- RTP tag -->
<script type="text/javascript">
(function(c,h,a,f,i,e){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
c[a].a=i;c[a].e=e;var g=h.createElement("script");g.async=true;g.type="text/javascript";
g.src=f+'?aid='+i;var b=h.getElementsByTagName("script")[0];b.parentNode.insertBefore(g,b);
})(window,document,"rtp","//abrtp2-cdn.marketo.com/rtp-api/v1/rtp.js","cambridgetechnologyp");
rtp('send','view');
rtp('get', 'campaign',true);
</script>
<!-- End of RTP tag -->
<title></title><link rel="stylesheet" type="text/css" media="all" href="https://nation.marketo.com/css/mktLPSupportCompat.css">
<style type="text/css">
#bodyId {
background: #ffffff;
font-family: helvetica,arial,sans-serif;
font-size: 14px;
text-align: center;
margin: 0px;
padding: 0px;
}
div#outerWrapDiv {
position: relative;
height: 100%;
width: 100%;
}
div#innerWrapDiv {
position: relative;
background: #ffffff;
padding: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
margin-bottom: 0px;
text-align: left;
}
/* フルページの幅 */
div#innerWrapDiv {
width: 750px;
}
/* 主要コンテンツ エリア - ページの高さを調節します */
div#mktContent {
background: #ffffff;
font-family: helvetica,arial,sans-serif;
font-size: 14px;
position: relative;
height: auto;
min-height: 100%;
width: 100%;
}
/* コンテンツの細い列 */
div#mktHeader {
height: 100px;
background: RGB(112,173,71);
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-46714024-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-46714024-1');
</script>
</head>
<body id="bodyId" class="mktEditable" align="center">
--引用ここまで
もし、同じような悩みを抱えていて、「この方法でうまくいったよ」という方がいたら、ご教示いただけませんか。
お手数ですが、よろしくお願いいたします。
谷風