How to set pdf width in mobile safari

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);
}