I am trying to print out an ID card from a web page. It's important that the card print out to an exact physical size on the paper, which for our purposes here can be 3 inches wide by 2 inches tall.
Each card is an image in a <div> element and here's what I think is the relevant CSS:
#media print {
#page {
margin: 0.5in;
}
.card__print {
width: 3in;
height: 2in;
}
.card__print img {
max-width: 100%;
}
}
When I print the card on Safari, it is about the right height (2in), but slightly too wide (~3.25in), which means the card is actually being stretched.
When I print on Firefox or Chrome, the card seems to have the correct aspect ratio, but it's slightly too narrow and too short. Both printouts are exactly the same as one another, however.
All three browsers are set to 100% scale.
Is there a way to fix this issue, or do the various browsers simply interpret the page differently?
Related
To demonstrate this issue, I have a very simple webpage with a single div element with width set to 100%, and a background color to verify its width. On most devices I've viewed this on (PC, smart phones, tablets), everything behaves exactly as expected. However, I have an iPad pro 11" that will show the page properly in portrait mode in Chrome:
Portrait mode
But when rotating to landscape mode, it keeps the same width in pixels and does not extend to 100% of the new width:
Landscape mode
I tried searching for this issue for hours, but never seemed to come across anyone with my exact issue. I came across numerous answers that said to make various changes to the <meta name="viewport" ... /> tag, all of which I tried to no avail. It's almost as if rotating the device does not tell the browser that the viewport dimensions have changed. I am fairly new to front end web design and very new to responsive design for mobile devices, but it seems like something as simple as an inline style for width 100% should suffice for my needs here.
Can anyone offer some guidance?
EDIT: I discovered that I can load the page initially in landscape mode and get the desired 100% width, but then when I rotate to portrait I have the opposite problem - the element extends to the right beyond the edge of the screen. And again this only seems to happen on this specific model of iPad (Pro 11).
My trick for always getting the HTML body to occupy the whole page while the children can behave responsibly is doing:
body {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
Then the child div inside the body could be:
div {
background: red;
height: 20px;
width: 100%;
}
The trick here is basically making the body responsive with the browser's viewport and allowing the children to flow inside the body.
Tip: try to brush up on CSS3's Flex and Grid model, which is the norm nowadays, and will allow you implement flexible layouts.
I've been testing different DPRs using Chrome and Firefox dev tools, and it appears that changing the DPR has no obvious effect on the final render.
I tried multiple test cases, both real life photos and illustrations. I made sure that the resolution of the image I used was significantly less than what would be rendered on a 2x or 3x display. See example below and use the responsive tools in Chrome or Firefox dev tools to change the DPR. I set the width of the image to be 500px in CSS. The intrinsic resolution of the image is 520 x 720 pixels. So on a #3x device it should be scaling that image to 1500px wide, making it look blurry.
Does my display need to support a 3.0 pixel ratio in order to simulate it?
body {
background: #dddddd;
}
img {
width: 500px;
height: auto;
}
<img src="https://cdn.pixabay.com/photo/2013/07/13/11/34/apple-158419_960_720.png" alt="Red apple">
I believe you're looking for
body {
background: #dddddd;
}
img {
width: 100%;
height: auto;
}
I think that's it? it scales the photo up, to stop it from scaling up you'd have to use max-width/max-height and set it to the highest you want it to go to before the %tage cuts itself off.
I am making a web user interface for an embedded device and I want to replicate that user interface in the form of a website.
Basically I need a single view container that will be centered on a desktop and resize according to the viewport, but fill a mobile screen. The image below shows what I want:
As far as I can see the common solution are media queries but those seem a bit tricky for what I want. Especially since I don't particularly care about the resolution, but more about the screen size. Pretty much any smartphone will have a large enough resolution to fit everything that I want. Probably an ideal solution would be just to ask the device if it is desktop or running on a screen larger than 8". But as far as I know that can't be done.
You can use
html, body {
width: 100%;
height: 100%;
}
#main_wrapper {
width: 100%;
max-width: 800px;
height: 100%;
max-height: 800px;
position: relative
margin: 0 auto;
}
This leaves open vertical centering (do you even want that?) or a margin-top for desktop-devices, which should be done with a media-query that includes min-width and/or min-height.
The "rh" logo on my site is responsive vertically, ie fits perfectly to a tall thin window, but does not resize to a wide short window. Could anyone help me make the logo responsive to both width and height?
here is the website... (takes a bit to load up)
http://rhwebdesign.co.uk/
Here is my CSS:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
To be very specific and address your questions about the logo, consider setting the max-height relative to the window's height.
You have:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.hero-logo img {
max-width: 100%;
min-height: 100%;
padding: 20px;
}
In order to scale the logo, add in to the latter block:
max-height: 100vh;
This sets the images maximum height to 100% of the viewport height, which appears to be what you desire here. Note that there is some text beneath it, which is not displayed, since it is text wrapped in an H5. These two lines are 68px tall (40px padding plus 28px for the text). So, you can adjust the above to:
max-height: calc(100vh - 68px);
It looks like in landscape mode (480x320), there is a script not calculating the size of margin correctly.
<div class="container hero-content" style="margin-top: -97.5px;">
have a look in main.js for this function:
heroContent.css({
"margin-top" : topContentMargin+"px"
});
Which is this:
topContentMargin = (heroHeight - contentHeight) / 2,
heroHeight = windowHeight,
contentHeight = heroContent.height(),
I haven't really looked into why it is calulating it incorrectly. My guess is that heroContent is too high for landscape mode because the image becomes 441px high with the media query max-width:100%. So it tries to add a negative margin to compensate.
My advice would be to remove the jQuery calculation of the hero content sizing and apply sizes using css and media queries only.
Edit:
You need to be more specific with your css. Learn some more about css specifity. You should include your largest media queries at the top, so the smaller ones will take precedence at the bottom. Makes things easier. Also IMHO, I wouldn't use queries for anything larger than iPad. ie. 1024px. Although you should always test on newer devices if possible.
You will need to specify the height of the video for each specific device size. I can't tell now, but maybe jquery was determining the section heights, so now the css is determining the video height.
So at the bottom of your style sheet, try this.
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:940px !important;
}
#media (max-width: 480px) {
.hero-logo img {
max-width:55%; /*looks nice at 480 */
padding:20px;
}
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:320px !important;
}
}
#media (max-width: 320px) {
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:480px !important;
}
}
But Richard, to be honest, you should be troubleshooting and testing the design yourself. How will you ever learn if you don't try. Remember, firebug is your best friend :)
When I get a psd(1750*2400),I found the images and font size were too big for lower resolution.Is it possible to make page fit in different resolution ? Thanks.
I usually divide this into 2. What I mean is that the dimension of the website, in this situation, is 875x1200. Thus for every spec, such as fonts, block width, image width should be divided into 2.
For example, the Header font size is 42px then you could apply 21px.
For images you can do this purely with CSS by specifying the width and height of your preference. The browser will resize the image (though if you don't choose the right aspect-ratio the image may look obviously expanded or compressed).
img {
height: 300px; //whatever height you want
width: 200px //whatever width you want
}
For a responsive layout you can use CSS3 media queries to achieve the best look on different resolutions.
Example for responsive layouts:
img {
height: 100%;
width:100%
}
#media screen and (max-width:64em) {
height: 70%;
width: 70%
}
As for the font-size, you may have to sacrifice pixel-perfection at times for the best look and decide for yourself whether the font looks appropriate for the display or not.
This too can be controlled by using media queries though:
#media screen and (max-width: 32em) {
font-size: 1.5em
}