Html5/CSS3 Media Query
Question
I made a new html document with only a PDF-file in it. The code:
<embed src="impressum.pdf" width="1200" height="900" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
It workes perfectly but my problem is now, that I don´t know how to format it for the smartphone view. I started with the regular Media Query code in css and don´t know what I should put in there:
@media screen and (max-width: 800px) {
}
2 answers
solution1
1 2020-01-10 18:53:05
You can wrap your embed object in a div and then style it height and width . Does it help with your problem?
HTML
<div class="pdf-wrapper">
<object dtype="application/pdf" width="100%" height="100%">
<embed src="./test.pdf" type="application/pdf" width="100%" height="100%" />
</object>
</div>
CSS
.pdf-wrapper{
width:100vw;
height:100vh;
}
@media screen and (max-width: 800px) {
.pdf-wrapper{
height:40vh;
}
solution2
1 ACCPTED 2020-01-10 18:59:33
You can simply set the height and with to a 100% for the embed and set the body height to 100vh :
body {
height: 100vh;
overflow: hidden;
}
Like this, the pdf will always have the correct width no matter what device you open it on.
<body>
<embed src="impressum.pdf" width="100%" height="100%" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.