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.
Related
http://9gag.com/gif used to show the animations as gifs, now they are html5 videos. What is the reasoning behind such a decision?
The reason is simply that video compresses better than gif in many cases, particular when the gif is of some size or length.
Additionally, video can be streamed affecting traffic and when the displaying can start (almost right away), gifs has to be loaded completely before they can be shown (ore they will be shown slowly and progressive).
Now that most browsers are able to show video natively, video becomes a viable and desired option to animated gifs.
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 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?