I have a simple question about the <video> tag.
I want to build a simple full screen video chat that runs on PhoneGap (mobile) and desktop browsers (Chrome).
What I need is the video to stay full screen both if it comes from a mobile camera or desktop browser camera. I guess they will have different aspect ratio and I don't understand how to merge the problem.
What I am afraid of is, when video comes from a mobile camera then how could it fit the entire browser screen (full screen) which is bigger?
I am sorry if I haven't tried anything yet, but I just would like to understand what to start with, the logic behind.
Any tip appreciated!
If you don't wish to change aspect ratio of video, than you can only make full screen canvas. Video will still be shown in origin aspect ratio and around it will be black spaces. To make it full screen, use width: 100%; height: 100%; position: fixed;. Keep in mind that browser window not always is in common aspect ratio (16:9, 4:3 and so on) because you can view website in not maximized window. Than aspect ratio will be custom.
Related
I have set up a background-image for large and medium screens.
I have a touchbar macbook and it fits perfectly.
If I play with the mouse to make the window smaller (to see how it would be for different resolutions and less pixels), it's completely responsive and looks fine (it cuts a bit the right part of the picture but it's not zooming).
Same when I open the developer tools, the Ipad pro version is half-cut but not zoomed.
But when I try to go on the website with an older macbook, the image is completely zoomed and does not fit the screen anymore.
I don't understand how there can be such a difference as we have different resolutions but same inches.. And as when I play with it on my computer, the image stays at the right size even with less pixels.
How can I solve this problem? Why is it doing this? I am fine if the image is a bit cut on the right or left side but I don't want it to be zoomed.
I have tried - height: auto, width: 100vw, background-size:contain (but it's too small) and no-repeat... basically everything with css
background-image: url(/assets/dessin-ba68b8b….png);
background-size: cover;
height: 100vh;
Thank you
When you use cover for background it is guaranteed that the same image will NOT look perfect on all screen sizes, since the browser needs to display it in different dimensions.
To handle this you may generate several images, each for screen size you aim at and use CSS media queries to apply the appropriate image for each screen size.
I am working on blog at blogger and it has got a responsive template. When I see logo on my blog on the computer it looks fine but when I go to iPhone it is kind of blurred and I don't know what is the reason for that.
I tried to edit logo and change it for different one but the result is the same...
Link to my blog is: www.5minLunchBox.blogspot.com
Does anyone have an idea how to fix it?
Thank you!
Your natural width is 220px width. But your mobile viewport width exceeds that amount to 320px to 480px depending on the mobile device. Not to mention, you are using a .jpg image which is highly pixelated.
SOLUTIONS
Familiarize yourself with .svg technology. Using an SVG will allow you to manipulate the image at all widths and make use of your max-width:100%;.
Use a larger image (no smaller than 480px) this way, you can still resize down without losing resolution, and not have a need to re-size up, which is your problem here. You are expanding .jpg pixels
Once you have added a larger logo, hopefully a .png at least, but preferably an .svg, do the following:
#media only screen and (-webkit-min-device-pixel-ratio: 1) {
.widget iframe, .widget img {
width:100%;
max-width: 320px;
}
}
This happens because the real logo jpg dimensions are: 200x90 pixels. On the desktop version set the width to 200px but the smartphone version set the width to 100%. For this, on an iPhone 6, the logo width become 375px and the image appears blurred and pixelated (on iPad become 768px).
You could augment the real size of the jpg logo, but the file size could be too big. If you can change the image format you could convert the logo to svg.
Is there any way to get the window aspect ratio in a css media query? I have found the device-aspect-ratio, and device-pixel-ratio, but it seems that it is all possible to get several breakpoints based on pixel size and number of pixels and also device width. Is it not simpler to make website relative to the browser window because the browser window spans over the whole device on mobile phones (for now) but on PC you can resize your window to your wishes?
So is there any workaround or do I need to do some server/client side programming?
Thank you enigma. English is not my first language.
I want all images for a mobile site to be 640px wide, based on iPhone screen size.
All images should be the full width of the screen when shown img { width: 100%; height: auto; }.
For the images that are smaller than 640px wide, is it better to use the above CSS to scale them up, or should I use Photoshop or something to scale the actual image up? Does it even make a difference?
So does scaling up an image using CSS result in a better or worse image quality than using something like Photoshop to increase the size?
Scaling images up doesn't go well for the quality of said images, you need to sort out your priorities on this one. You can work on those images and increase the quality and size of those images in Photoshop so you don't lose any quality when resizing, but this will increase page loads or you could lose some quality, but improve page loads with smaller but more crappy images.
If you really want to target each device (computer vs mobile) perfectly you can use javascript to switch out the images. This can be done really easily using http://foundation.zurb.com/docs/components/interchange.html or similar libraries.
If the images are graphics or icons I might suggest just making them svgs and using those instead as they are crisp at a greater range of resolutions. If you go with this option its best to make their sizes multiples of two.
So I have images that I would like to take up the full screen in my HTML5 code. I have their height and width set to 100% which I assumed should have done resizing.
If I place images in that are 3240x480 they fit my phone just fine, but on the iPad the stretch the height it seems to fit but the width seems to stay at 320.
If I place in images that are 768x1004 they fit the iPad perfectly, but on the phone they display to large. I thought the 100% would do rescaling, but I guess I'm wrong.
So I tried setting the images with 768x1004 to width="window.innerWidth". That shrinks it down on the phone pretty well, except it still stretches past the bounds of the screen a bit. As for the iPad it shrinks the width down some so now there is a gap between the image and the wall of the screen.
Any ideas how to get a clean and simple auto resize to adjust to the screen preferably with just the 1 image. Or else how would I set it so there are multiple images and it puts in the image for the iPad size if its an iPad being used other wise the phone sized images if its a phone being used?
Thanks
I´m pretty sure, that you can´t, without really ruin the quality of your picture resize the image. But I do know that you can use a script to redirect your user to the site that fits for their screen. See this site http://www.dynamicdrive.com/dynamicindex9/info3.htm or Google "Screen redirect" and a several alternatives appear infront of your eyes! :))