I am trying to display a pdf file embed in a webpage. I am using the <object>
tag. The pdf can be displayed in iphone or ipad. However, I want to make the pdf display fill the full width of the webpage. I am unable to find out any document about setting the pdf width for mobile safari. Please help
<object id="objectPDF" type="application/pdf" data="pdf.pdf" width="100%" height="1000px" style="border:2px solid red; text-align:center">
<开发者_如何学Go;param name="view" value="fitH" valuetype="data"/>
you might want to put it an a div and take out the width in the object tag,
<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>
Just from looking at it I'd say it should work if you close the </object>
element.
Why do you use width and height as object attributes? I would just use css for it. And I don't think that
text-align: center
is approriate for an <object>
since this is not HTML-rendered. Inside i'ts just a plugin. Maybe that's another thing that could break it.
And @LG PDF and @Trevor Rudolph: your <object>
never closes! Maybe that's why safari does it not right?
This might have to do something with the pdf plugin as well. Here is what works. I tested it through the screenshot service on Safari, but mobile is another thing. What about the border? You can see it show up right?
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>
I tested it with a flash object. No wrapper needed, btw. Object would take W x H, e.g. <div>
works.
Nothing works for me when using object. If iframe is used instead, and proper scaling is applied, it works. Not perfect anyway.
<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);
}
精彩评论