I'm having 2 problems with media queries and HTML5.
The below code in the <body> section of an html file, is in a div that's given an id name of social_networks.
Problems
1) delicious_old.jpg does not show on devices whose screen width is upto 375px.
Tested with Chrome 36.0.1985.135 on an LG L20.
2) delicious.jpg does not show on devices whose screen width is from 375px to 2560px.
Tested with Firefox in Ubuntu 14.01 - 15 inch monitor.
I've search on SO, and Google and read lots of articles and questions but not come across one yet that solve them.
Code:
<figure>
<!-- low-res, default -->
<source src="/resources/delicious_old.jpg" media="(min-device-width: 0px) and (max-device-width: 375px)">
<!-- medium-res -->
<source src="/resources/delicious.jpg" media="(min-device-width: 375px) and (max-device-width: 2560px)">
<!-- Fallback content -->
<!--<img src="/resources/delicious.jpg" alt="Add to Delicious">-->
</figure>
Above code updated following comments.
Please advise
Related
I have view port ~1200px and picture container has 180px. This code:
<picture>
<img srcset="img_180.jpg 180w, img_350.jpg 350w" src="img_350.jpg" alt="">
</picture>
loads img_350.jpg. Why it happens if image container is 180px?
Okey, maybe I have to set sizes attribute. My picture container is 180px if view port is > 576px, else it has 100% width. So this code:
<picture>
<img sizes="(min-width: 576px) 180px, 100vw" srcset="img_180.jpg 180w, img_350.jpg 350w" src="img_350.jpg" alt="">
</picture>
loads both img_180.jpg and img_350.jpg. How to fix this? I need to load img_180.jpg only if user has > 576px view port, else load img_350.jpg, because if <= 576 px picture container has 100% width.
You might think because img_350.jpg loads automatically from src, but that's not right, because I added <source ... type="image/webp"> and it loaded img_180.webp and img_350.webp (no .jpg).
https://jsfiddle.net/wLprbk7j/
This is because you have both src and srcset defined. Remove src attribute. This will let browsers calculate the src based on srcset and media queries. Browser will then automatically load the correct image.
As a fallback, remember to include picturefill.js
Hopefully this is a simple answer. I have a page that on desktop needs a series of share icons (fb, tw, ig) underneath a paragraph of text. But on mobile, these icons are included in a template already so I don't need them to show. It looks repetitive. I am using a CMS and only have access to the body text of the page, not the headers, so extensive javascript isn't ideal. What inline CSS styling or other such magic will make this div disappear? And can I shrink it only on verified mobile devices or is it better to do it just with the browser window size?
Currently the code is very simple:
<html>
<body>
Some text here.
<div id="mydiv">
<img src="/some/icon1.png">
<img src="/some/icon2.png">
<img src="/some/icon3.png">
</div>
</body>
</html>
All I need to do is make "mydiv" disappear if I'm using an iPhone, iPad, or Android device...
Thank you!
You can use media queries:
A media query consists of a media type and zero or more expressions that limit the style sheets' scope by using media features, such as width, height, and color.
When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Documentation:
MDN
w3schools
For example:
#media (max-width: 787px) {
#mydiv {
display: none;
}
}
Some text here.
<div id="mydiv">
<img src="/some/icon1.png">
<img src="/some/icon2.png">
<img src="/some/icon3.png">
</div>
I have two images, one I need for landscape orientation and one for portrait.
Using <picture>, i can use standard media queries, but <picture> is not supported on Safari, so i want to use <img srcset>. I can't find any information, how to adress portrait orientation for any device in srcset.
Any help?
You can't use srcset for art direction. Use <picture> and picturefill instead.
safari now supports <picture> . Here is code to display different images for portrait and landscape modes.
<picture>
<source media="(orientation: landscape)" srcset="landscape.jpg">
<source media="(orientation: portrait)" srcset="portrait.jpg">
<img src="fallback-image.jpg">
</picture>
I have an adult wordpress blog and I am using juicyads as my affiliate advertising network. I have one pop-under which I would like to disable on mobile devices only because I realized it is a big nuisance for the mobile visitor which will hurt my traffic.
The script is in the header and begins and ends as below:
<!-- Begin JuicyAds PopUnder Code -->
<script type="text/javascript">juicy_code='9454y2u2w256r2r2s2c42354';
<!-- End JuicyAds PopUnder Code -->
Is there any way I can modify it so it does not appear on mobile visits? Thank you.
Kind regards,
Pintersex
Replace the code with this:
<div id="mobile-popup">
<script type="text/javascript">juicy_code='9454y2u2w256r2r2s2c42354';
</script>
</div>
Add this to CSS
#media screen and (max-width: 480px) {
#mobile-popup {
display:none;
}
}
I went to this discussion from 2012:
How to load different video for mobile devices and desktop web version?
because I was having the same problem. My mp4, webm and ogg videos of 7MB or so work fine on my desktop computer but hang up miserably on my Android smartphone.
#Subhajit gave this sample code that he had tried unsuccessfully:
<video controls>
<source src="mySmallVideo.webm" type="video/webm" media="all and (max-width:600px)">
<source src="myVideo.webm" type="video/webm">
</video>
and was referred to a stackoverflow discussion on the best way to detect a handheld device.
But that only gave advice for detecting when the site was being viewed on a mobile device. Nobody offered alternative code to his sample, for showing a smaller version of the video after a mobile device was detected.
My responsive site CSS code has #media (max-width: media queries. The one for mobile devices is set at 500px. How could I modify the sample code of #Subhajit to show a smaller version of a video, perhaps referencing the media query #media (max-width: 500px) coding in my CSS file?
I'd rather not use mobile detection, commercial video players, or online storage sites.
Thanks, #Fabio Here is my code so far from your first suggestion:
<video controls>
<source src="portfolioVideos/testMovieWEnd480x270.mp4.mp4" type="video/mp4" media="all and (max-width: 500px)">
<source src="portfolioVideos/testMovieWEnd480x270.webmsd.webm" type="video/webm" media="all and (max-width: 500px)">
<source src="portfolioVideos/testMovieWEnd720x405.mp4.mp4" type="video/mp4">
<source src="portfolioVideos/testMovieWEnd720x405.webmsd.webm" type="video/webm">
I made two five-second "movies," consisting of a "test pattern" still which ends with a "the end" superimposed on it. The big movie for computer screens is 720x405 pixels and labeled "for 'puter." The small one for mobile screens is 480x270 pixels and is labeled "for mobile." When I alternate window sizes in Firefox and Safari (and refresh), they actually bring up the proper version. Chrome only shows the mobile version. (Reversing the order in the coded only makes everything worse.)
The mobile version also comes up when I enter the video html in Mobile Phone Emulator. But when I call it up on my Android smartphone, the vid is so minascule I can't read which version it is, or even click on it.
I looked at that the Chris Coyier page you recommended, but I couldn't figure it out. How would I search for more on this jQuery code? Thanks for previous and any possible follow.
I tried taking a couple of new tacks on this problem.
First, I tried using a jquery "window width" method and an if/else conditional to bring either a small or large version of the video into an iframe.
$(document).ready(function () {
if ($(window).width() < 550) {
<iframe src=... width="480" height="270"></iframe>
}
else {
<iframe src=... width="720" height="405"></iframe>
}
});
</script>
That didn't work. Safari and Chrome both give me an "Unexpected token '<'" error, which I understand "happens when you're including or posting to a file which doesn't exist." These files exist and work when opened directly. I tried using absolute urls, as recommended by #amenadiel, but that didn't work either.
Second, I tried "window location" with an if/else conditional.
$(document).ready(function () {
if ($(window).width() < 330) {
window.location.href = ...;
}
else {
window.location.href = ...;
}
});
This works when tested in the various simulated devices and window sizes on two online emulators. But it doesn't work on my Android smartphone. There, just a tiny, empty, unclickable video window in the upper left of the screen.
I may have answered my own question.
I found here:
https://github.com/etianen/html5media/wiki/embedding-video
this super simple code:
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>
<video poster="poster.jpg" width="618" height="347" controls preload>
<source src="video.mp4" media="only screen and (min-device-width: 568px)"></source>
<source src="video.iphone.mp4" media="only screen and (max-device-width: 568px)"></source>
</video>
which seems, miraculously, to have worked. Check out this page,
http://willsoper.net/videoPortfolio.html
which contains two videos, each with a large and small version.
Try the "Test Pattern" one on the right first; it's only ten seconds long. The larger version is labeled "for 'puter" and the smaller one, "for Mobi." On my Samsung Galaxy Android in vertical position, the "Mobi" version appears. If I hit the back button, turn the phone to horizontal, and try it again, the larger, "'puter" version appears.
The video on the left, with the man, also has a small and large version and seems to work the same way. It is much longer and on my smartphone it sometimes re-buffers briefly once or twice.
Ironically, my previous coding worked in online emulators but not on my actual smartphone. This one works on my smartphone but not on the emulators.
I'd appreciate knowing what others, especially #Fabio , experience and how I might improve on the code.
well, Frist add class to each video
I have two videos with different size
<div class="fullscreen-video-wrap" height="800px">
<video id="video" class="vidbig" src="./picture/ThisEgypt.mp4" autoplay="true" loop="true" muted="false" width="100%" ></video>
<video id="video" class="vid-mobi" src="./picture/Dolphin.mp4" autoplay="true" loop="true" muted="false" width="100%" ></video>
</div>
and on css media query
#media only screen and (min-width: 900px){
.vid-mobi{
display: none;}
}
#media only screen and (max-width: 900px){
.vidbig {
display: none;
}
}
Well, you have 2 options:
1) Serving video based on media queries just as you mention. You simply set different sizes based on the device width, like this:
<video>
<source src="video-ipad.mp4" type="video/mp4" media="all and (max-width: 768px)">
<source src="video-mobi.mp4" type="video/webm" media="all and (max-width: 768px)">
<source src="video-mobi.mp4" type="video/mp4" media="all and (max-width: 480px)">
<source src="video-mobi.webm" type="video/webm" media="all and (max-width: 480px)">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
You can also use some JQuery screen detection as shown on this page
var mainVideo = $('#the-video');
if ($(window).width() < 1200 && medQualVersion) {
mainVideo.append("<source type='video/mp4' src='" + medQualVersionSrc + "' />");
} else {
mainVideo.append("<source type='video/mp4' src='" + highQualVersionSrc + "' />");
}
mainVideo.append("<source type='video/webm' src='" + webMSrc + "' />");
// Wait until sources are appended to call MediaElements.js
mainVideo.mediaelementplayer();
The second option is to simply server high quality video and resize it, like this:
video{max-width:100%; height:auto}
this way is bullet proof and always work, not to mention you serve better quality video. But of course, you'll have the data transfer issue, so for big videos I'd recommend method 1 .