Как установить ширину PDF в мобильном сафари

Question

Я пытаюсь отобразить PDF-файл, встроенный в веб-страницу. Я использую тег <object>. PDF может отображаться в Iphone или Ipad. Однако я хочу, чтобы отображение в формате PDF занимало всю ширину веб-страницы. Я не могу найти какой-либо документ о настройке ширины PDF для мобильного сафари. Пожалуйста, помогите

<object id="objectPDF" type="application/pdf" data="pdf.pdf" width="100%" height="1000px" style="border:2px solid red; text-align:center">
<param name="view" value="fitH" valuetype="data"/>

Answer 1

Просто глядя на это, я бы сказал, что это сработает, если вы закроете элемент </object>.

Почему вы используете ширину и высоту в качестве атрибутов объекта?Я бы просто использовал для этого CSS.И я не думаю, что

text-align: center

является ценным для <object>, поскольку это не HTML-рендеринг.Внутри я просто плагин.Может быть, это еще одна вещь, которая может сломать это.

И @LG PDF и @Trevor Rudolph: ваш <object> никогда не закрывается!Может быть, поэтому Safari делает это неправильно?

Возможно, это также должно быть связано с плагином pdf.Вот что работает.Я проверил это через сервис скриншотов в Safari, но мобильные - это другое.Как насчет границы?Вы можете видеть, как оно отображается, верно?

CSS:

.myobject {
width: 100%;
height: 1000px;
border:2px solid red;
}

HTML:

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/u1zgFlCw8Aw?fs=1" class="myobject">
<param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?fs=1" />
</object>

Я протестировал его с помощью флэш-объекта.Нет необходимости в обертке, кстати.Объект будет занимать Ш х В, например, <div> работает.

Answer 2

вы можете поместить его в div и вывести ширину в теге объекта,

<div width="300px" height="100%">
<object id="objectPDF" type="application/pdf" data="pdf.pdf" height="1000px" style="border:2px solid red; text-align:center">
<param name="view" value="fitH" valuetype="data"/>
</div>

Answer 3

У меня ничего не работает при использовании объекта.Если вместо этого используется iframe и применяется правильное масштабирование, это работает.В любом случае, не идеально.

<div id="pdfVewerWrapper">
    <iframe id="pdfVewer" src="url"></iframe>
</div>

#pdfVewerWrapper {
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: 1;
    overflow: auto;
    padding: 0;
    margin: 0;
    -webkit-overflow-scrolling: touch;
}

#pdfVewer {
    width: 595px;
    height: 20000px;
    margin: 0;
    padding: 0;
    -webkit-transform: scale(1.6);
}