It seems that video element sizing behavior is different between mobile to desktop:
on http://www.quirksmode.org/html5/tests/video.html
on desktop chrome its width is about 35% of the browser. on ipad chrome is about 10%
any ideas why? where can i get the rules to this?
thanks much
Lior
Apple documents this non-standard behavior in this document, which is worth reading because it covers some other things you're going to have to worry about with video on the iPad.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1
Default Height and Width on iOS
Because the native dimensions of a video are not known until the movie metadata loads, a default height and width of 150 x 300 is allocated on devices running iOS if the height or width is not specified. Currently, the default height and width do not change when the movie loads, so you should specify the preferred height and width for the best user experience on iOS, especially on iPad, where the video plays in the allocated space.
Also, have a look at this related question:
Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
Related
I've been developing a website on my local machine that has a fixed nav menu at the top. When a browser zooms in, I use media queries to compress the space between objects in the header so all objects fit on screen, and this works well on desktop.
However, I've noticed when testing on a mobile device (Android Galaxy S3) that these media queries are not triggered on pinch zoom, resulting in the icons expanding past the limits of the mobile viewport.
I can't find good documentation of this behavior online. I've seen it mentioned sporadically that this is designed behavior, and pinch zoom is like a 'magnifying glass' that should not activate media queries. I'm considering disabling the nav menu on mobile entirely. Is there a native way to deal with this problem, or will this require a javascript solution?
Here are two pictures. The first is the nav menu at no zoom, the second is the nav menu pinch zoomed on a mobile device.
Below are the two media queries I'm currently using. Note that I am using the meta viewport tag to set the content width as well; I can't think of anything else that might influence this behavior.
#media screen and (max-width: 74em){...}
#media screen and (max-width: 47em){...}
I have tried px measurements as well.
Let me know if any more information is required. Thank you for your help.
I was oscillating between fixing the viewport to the device width and fixing it to an absolute width, as well as testing between browsers. Setting the meta viewport tag to device-width works on some browsers, but not all, and it appears mobile has historically poor support for fixed headers. I ultimately opted to simply disable the header on certain devices; I think any other solution would demand using javascript and probably yield a pretty poor performance on mobile devices.
As well, setting the viewport to device-width may compress the body of an HTML page set to 100% height to less than the device height, which is a problem if you're working with a footer. I ultimately solved this by padding out the body with extra space depending on the aspect ratio.
After dealing with this problem I'd recommend avoiding fixed items on mobile devices, unless you specifically target a userAgent. In general mobile devices are too dynamic in size, and using fixed headers seem to be a bit more trouble then they're worth.
I am trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html
Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to scroll from side to side but not desktop browsers.
i set the body up for 300px width just to see if i could find the rogue element, but put it back because it did not work. there are a few tables in the content, but all set to 100% width.
for some reason, it almost looks like the width in the desktop and on mobiles or not actually the same.
Jeff
Do you actually think it is the viewport? Do you have the viewport set with the right content?
Maybe this link could help.
Or is it just the CSS? In that case I would recommand you searching for width and such. Trying to find big numbers..
Setting a specified width should be for specified screen sizes. Otherwise make it max-width.
If I set a div with to
height:85vh;
the bottom of the element id off the screen by quite some amount (the for the page is only about 40px high....)
To get it to fit on the page I have to set it to
height:55vh;
Also this only works in portrait mode, if I turn the ipad to landscape it still seems to think the viewport is portrait even if I refresh the screen!
Setting vh to 85 works on android tablets, windows tablets, and desktop browsers (android and windows tablets also resize the viewport on rotating the device). Why is ipad acting so odd?
I am having this issue now too, and I guess the temporary fix until it is fully supported, would be a Javascript hack. Check the viewport height with Javascript, and use it to set the height of the elements. On tablets, there will be 2 viewport heights, one for each orientation, so I would do a recalculate when changing the orientation.
A good guide can be found here: http://davidwalsh.name/orientation-change
I am creating a responsive website/hybrid app and im starting to discover lot of new information regarding CSS3.
While going through media-queries, i found that we can detect the so many properties of browser as follows :
min-device-width
max-device-width
min-device-height
max-device-height
orientation:portrait
orientation:landscape
-webkit-min-device-pixel-ratio
-webkit-max-device-pixel-ratio
and many more...
So my question is :
1. Is the screen resolution the same as the device-width obtained..?
2. If not, Can i target the browser resolution using css3?
Thanks
Roy
device-width
Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
width
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).
source
I have a bit of an issue, I am developing a full HD (1920x1080) website which I also want to be able to use on the iPad retina display (2048x1536) however the iPad is only showing that it has a resolution of (1024x768) despite the specs clearly stating otherwise (http://www.apple.com/uk/ipad/specs/)
If I create a div of width 1024 then it appears full screen on the iPad and a div of 1920 width forces the iPad to scroll?
Does anyone know why I cannot use the full retina display and am forced to 1024x768 resolution on the iPad?
That's an intended behaviour.
Since most web sites still specify their text size in pixels (12px), a retina screen would results in text that is much too small. To avoid this, Safari on the iPad 3rd gen and iPhone 4/4s tell web servers that they have 1/4 the resolution they really have. The text is then rendered in finer details by Safari but it also retains its intended size.
As a workaround, try setting the meta tag "viewport" in your site to allow for a greater resolution.
<meta name="viewport" content="width=device-width" />
Set your initial viewport size to half of it's original size thus creating a canvas that is double the size that the hardware returns (1024px * 2 = 2048px).