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?
Related
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 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">
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.
How does Safari determine what size to output an svg in the following scenario;
SVG code
viewBox 0 0 800 800
height 100%
width 100%
css
svg width 100%
containing div width 60%
Safari outputs a much smaller svg than the 60% of screen, ok this is a bug. But what determines the size of this smaller svg, it has no connection to anything I can think of.
Just to give some background info. Safari needs both width and height in px for it to do what you want. % don-t work. But it does output the svg, and so it must make a decision somewhere about its size.
It's not a bug you're seeing. That's the correct behavior. The browser by default scales the SVG viewbox (careful with the terminology now, we're not talking about the browser viewport) to fill the CSS-determined dimensions of the SVG element. The fill behavior is determined by the SVG preserveAspectRatio attribute. By default it's set to meet, which keeps the whole SVG viewable, and the aspect ratio preserved. The alternative is slice which scales the viewbox up to cover the element, even when that means cropping. (slice behaves similarly to background-size:cover in CSS3.)
What you need to do is:
a) Don't declare explicit height or width in the SVG file. If your graphics editor is generating them, just go in by hand and delete them. According to the spec, if no width and height are specified, a value of 100% is assumed, so your pseudocode is redundant at best.
b) Make sure you're setting an explicit height for the svg element in CSS. I recommend developer or Canary builds of Chrome for troubleshooting responsive svg sizing, as there is a bug in Chrome 18 Dev Tools that has since been fixed. Once you've got it working in Chrome, it will almost certainly also work in Safari.
c) Figure out how you want to set preserveAspectRatio and manually edit the svg to put in the declaration.
If you're still having trouble, please post a jsfiddle. It's much easier for other people to comment on.
I designed my layout in 1000px. Is it possible to work with Blueprint CSS? Tutorials say 950px is the maximum width of a blueprint. Is there any solution?
http://bluecalc.groupion.com/ will help you generate a grid.css file suitable for your layout width.
You can use any maximum width you want. It may not look great on all monitors, but that's your call.