I have done my research on mobile screen widths but there is something I can't quite have a direct answer too.
Take the iPhone 4 for example, at this site it has a width of 640px and a height of 960px. However it has a device width of 320px. What is a device width? I'm making a responsive website and this device width seems to be a key part. Is the device width a size given so that websites scale properly? its smaller then desktop sites, other wise they would scale to the same resolution as a desktop monitor nearly? Can some body please explain the device width in relation to the actual width and if possible in context of responsive web design and the view port meta tag.
it is because you didn't set the viewport. More on that here: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Try to add this meta tag to your head section and it should solve your issue:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
I've the following constraints which are working perfectly fine over Chrome in Desktop (simulating mobile resolution)
const constraints = {
audio: false,
video: {
width: screen.width,
height: screen.height
}
};
navigator.mediaDevices.getUserMedia(constraints).then(stream => {})
However when actually trying this on iPhone / Safari the camera doesn't respects this at all and gets super small or distorted - removing the width / height from the constraints makes it better ratio but not full screen at all, just centralized.
I've also tried with min / max constraints without lucky.
Is there any way to get this working on iPhones?
I have built a few AR Websites which are mobile first. When you request a resolution the web browser sees if the resolution exists, and if it doesn't it then decides if it should emulate the feed for you. Not all browsers do emulation (even though it is part of the spec). This is why it may work in some browsers and not others. Safari won't emulate the resolution you are asking for with the camera you have picked (I presume the front).
You can read more about this here (different problem, but provides a deeper explaination): Why the difference in native camera resolution -vs- getUserMedia on iPad / iOS?
Solution
The way I tackled this is:
Without canvas
Ask for a 720p feed, fallback to 480p feed if 720 gives an over-constrained error. This will work cross-browser.
Have a div element which is 100% width and height, fills the screen, and sets overlay to hidden.
Place the video element connected to the MediaStream inside, make it 100% height of the container. The parent div overlay hidden will in effect crop the sides. There will be no feed distortion.
With canvas
Do not show the video element, use a canvas as the video view. Make the canvas the same size as your screen or the same aspect ratio and use CSS to make it fill the screen (latter is more performant).
Calculate the top, left, width and height variables to draw the video in the canvas (make sure your calculation centers the video). Make sure you do a cover calculation vs fill. The aim is to crop the parts of the video which do not need to be shown (I.e. like the descriptions of various methods in https://css-tricks.com/almanac/properties/o/object-fit) . Example on how to draw video into a canvas here: http://html5doctor.com/video-canvas-magic/
This will give you the same effect of what you are looking for. Production examples of something similar.
https://www.maxfactor.com/vmua/
https://demo.holitionbeauty.com/
P.s. when I get time I can code an example, short on hours this week.
There are a couple of quirks on mobile gUM() you need to know about.
First, if the device is in portrait orientation things work weirdly. You need to swap the width and height. So, let's say you're on a 480x640 device (do those even exist? who cares? it's an example). To get the appropriate size video you need
const constraints = {
audio: false,
video: {
width: screen.height,
height: screen.width
}
};
I can't figure out exactly why it's like this. But it is. On iOS and Android devices.
Second, it's hard to get the cameras to deliver exactly the same resolution as the device screen size. I tweak the width and height to make them divisible by eight and I get a decent result.
Third, I figure the sizes I need by putting a <video ...> tag in my little web app with CSS that makes it fill the browser screen, then querying its size with
const rect = videoElement.getBoundingClientRect()
const width = rect.width > rect.height ? rect.width : rect.height
const height = rect.width > rect.height ? rect.height : rect.width
This makes the mobile browser do the work of figuring out what size you actually need, and adapts nicely to the browser's various toolbars.
I'm trying to create a video clip from a DVD and play it with video.js on a web page.
The source material on the DVD is in anamorphic format, i.e. it is stored with 720 x 576 pixels, but is meant to be displayed at 1024 x 576.
I've created a mp4 file using Handbrake with its 'strict' anamorphic setting.
VLC displays the resulting file correctly, i.e. the width is stretched to 16:9 eventhough VLC media information correctly reports 720 x 576 pixels.
When I try to view it with video.js using the html code below, the video is not stretched - but square pixels are assumed.
A Google search didn't reveal much, at least not in the context of anamorphic material.
Some postings suggest to change the width to "100%" or "auto", or put the video tag into a DIV with definied dimensions.
However, the result is always the same. The dimensions of the player itself change but the displayed video remains "squished" with black bars at either side.
Is there an option I have not found, an encoding setting that I have overlooked, or a CSS trick that can strech the video's width within the player? Or is it simply not possible?
Yes, I could scale the video to square pixels during encoding, but this seems to be a waste of space.
<html>
<head>
<script type="text/javascript">
document.createElement('video');document.createElement('audio');document.createElement('track');
</script>
<link href="file:///home/mike/videojs-demo/video-js.css" rel="stylesheet">
<script src="file:///home/mike/videojs-demo/video.js"></script>
<title>video.js test</title>
</head>
<body>
<video id="example_video" class="video-js vjs-default-skin"
controls
preload="auto"
width="1024"
height="576"
data-setup='{}'>
<source src="file:///home/mike/videojs-demo/test2.mp4" type='video/mp4' />
</video>
</body>
</html>
Setting the width and height attributes on a video element should solve your problem. But I see that you are using video.js and only an mp4 file. If, as I suspect, you're viewing the page in Firefox, which does not play mp4 in many cases, it is using the Flash fallback, which may not adjust the aspect ratio for you.
Try making a second source tag with a webm encoded version of the video. That will allow Firefox to play the video natively rather than with Flash, which should fix the problem and will get you better performance anyway.
I have a design that uses media queries, but the media queries only go down to tablet size (i.e. they don't go all the way to 320px for smart phones.
Since I am using width=device-width, smart phones show the page zoomed in.
Should I set width=768px (the smallest size that my media queries go down to)?
Will this mess up the view on tablets that have resolutions larger that 768px wide?
Media queries can do down to even 10px (No real limits on the ability)
Try setting the meta-tag like the following:
<meta name="viewport" content="initial-scale=1, minimum-scale=1, width=device-width />
See if this solves your problem. It would help if you can provide some code to help us answer better. There is only so much we can understand from just statements.
I just got to test IE10 on a Surface Pro with 1920*1080 display resolution where "make text and other items larger or smaller" has been set to Large.
On my website I have added the CSS+JS viewport fix in addition to the viewport meta tag, all asking for width: device-width (plus I added a "min-width: 320px;" to the #-ms-viewport definition to ensure it never gets smaller than that).
I added some javascript to display the value of window.screen.width and $(window).width to see what the browser ended up using for viewport in IE10, and to my surprise the screen size of a 1920*1080 resolution display was reported as 1280x720!
Now, I can live with with that (just like small phone screens report 320px width no matter their actual resolution, since it is a good size to make stuff human readable across devices for the same font size), but when the 'Metro IE10' is snapped to the side of the screen, the problem comes: IE10 tries to make a 320px rendering of the website, but it zooms in so the right side of it is hidden.
I tried Microsofts own test page: http://ie.microsoft.com/testdrive/Graphics/MakeItSnappy/
It does the same thing - on the Surface Pro the right side is hidden, and you need to drag left/right to see it, and you cannot even zoom out to view the full width!
But when trying the same thing on my laptop with a 'normal' 1366x768 display (rendered as 100%), the snapped IE10 display has the perfect size.
Ok, I guess this is a Microsoft Windows scaling bug - but my question is: Has anybody else experimented with changing the "make text and other items larger or smaller" to 125% or 150% and making websites adapt correctly?
Check out this fix from developer Matt Stow
http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
My LG Optimus One mobile has a resolution of 320x480. Yet only media queries with a max-width of 800px (and everyone knows that 320 = 800 !) are triggered on that mobile.
Any explanation?
The explanation is that max-width query triggers for all sizes smaller than the specified maximum width. If you'd like to restrict your stylesheet to 800px+, you'll need to use min-width 800px.
You have to use this code in the head section:
<meta name="viewport" content="width=device-width, initial-scale=1">
#mike hmm, I suspect you might be missing the declaration in your . This should tell the browser to adjust it's viewport size to the width of the screen (i.e.: 320px) instead of the (arbitrary) desktop screen width it was provided with as a default (i.e.: 800px).
The following thread might help shed some light on this issue:
Android browser reporting the wrong screen size?