I have come across numerous solutions from different articles but which one would put the least strain on the CPU?
There is
https://scottjehl.github.io/picturefill/
https://github.com/teleject/hisrc
but which one is recommended and has the best compatibility with browsers?
It depends on what you plan on doing. If you don't want elements to have a background image if the screen size is too small then you could use media queries e.g.
#media screen and (max-width: 300px) {
body{
background-image: none;
}
}
}
#media screen and (min-width: 301px) {
body{
background-image: url("/url/to/image.jpeg");
}
}
}
But if you want to control whether a certain image tag's source is loaded you could do this:
if(screen.width > 300) image.src = "/url/to/image.jpeg";
On the other hand, you could just hide the image tag using the same media queries
Use the css #media to detect the screen width to control whether load or not load image.
#media screen and (max-width: 400px) {
img {
display: none;
};
}
or use javascript.
$(document).ready(function(){
if (screen.width <= 400px) {
$("img").css('display', 'none');
}
}
);
Related
I am setting up a website, and when I open it on mobile or resize the page too small, the logo at the top of the page resizes itself in a way that looks bad. It would be great if I could resize it to look good, but at this point I am running out of time and just want to make it disappear.
I have tried and failed to write JavaScript scripts to make it disappear. I can set the visibility to hidden, but I have no way to do this in a responsive way to the page getting resized and no way to detect if the webpage is too small to begin with. I have attempted to use the onresize DOM Event, but it doesn't seem to work.
Here is my attempt at getting HTML to use the JS function:
<a href="website.com" class="header_logo" id="main_logo" onresize="fixBar()">
<img src="image.png">
</a>
Here is the JS function (which is below all the HTML on the page) that is not working:
<script type="text/javascript">
function fixBar() {
if (window.innerWidth < 400px) {
document.getElementById("main_logo").style.visibility = "hidden";
} else {
document.getElementById("main_logo").style.visibility = "visible";
}
}
</script>
But as you can see, I still don't know how to check in the first place if the window is sufficiently small.
Also, I am working under restrictions that make it very difficult to use jQuery. If that is my only option then I will use it, but I would really prefer not to. Thank you for the help!
You can use CSS Media Query for responsiveness.
#media only screen and (max-width: 400px) {
#main_logo {
display: none;
}
}
<a href="website.com" class="header_logo" id="main_logo">
<img src="https://placeholder.pics/svg/200x50">
<div>Any HTML element</div>
</a>
Here, when the window size is less than 400px the element with id="main_logo" will be removed.
Another CSS rule would be visibility: hidden;
There is a difference between display: none; and visibility: hidden;
Check that out here
You can use a CSS media query to accomplish this:
#media only screen and (max-width: 400px) {
#main_logo {
visibility: hidden;
}
}
OK, if you can use CSS media query for those kind of problem.
#media screen and (max-width: 480px) {
image-container-class {
position: relative;
height: 90px;
width: 150px;
//display: none;
}
}
or if you are trying to hide logo on small devices, use display none. see the commented code at up.
I have the almost the same situation as yours; that if the screen width is less than the my specified width it should hide the div. This is the jquery code I used that worked for me.
$(window).resize(function() {
if ($(this).width() < 400) {
$('.divIWantedToHide').hide();
} else {
$('.divIWantedToHide').show();
}
});
You might want to combine it with a resize event with you can check you window size
$(window).resize(function() {
if ($(window).width() < 400) {
alert('Less than 400');
}
else {
alert('More than 400');
}
});
The #media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Example :
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
AND
#media only screen and (max-width: 400px) {
#main_logo {
display: none;
}
}
checkout CSS #media Rule Here
you can go with id and class id represent it with # and class represent it with dot i.e .
I want to use some mobile ads but my website has responsive design so I don't use the m. subdomain.
How can I make an ad visible only to mobile users? What about only to desktop or tablet?
I'm using wordpress as a CMS.
Thanks,
It's quite easy using CSS3 Media Queries.
In your CSS:
#media (max-width: 480px) {
#ad-id {
display: block;
}
}
For bigger devices, hide it:
#media (min-width: 480px) {
#ad-id {
display: none;
}
}
If you are really concerned about data being downloaded, then you must detect the browser size on page load, if it's less than particular width then fire an ajax call and fetch the ad data and display it inside the placeholder container.
$(function() {
if($(window).width() < 480) {
$("#ad-id").load("adcontent.html");
// else use $.ajax for this purpose
}
});
Please use css media queries. you can show and hide specific div for mobile devices.
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) { }
One way is to use media queries. Make the ads as display:none by default and add display:block only in media queries for mobile.
.ads{
display:none;
}
#media (max-width:480px){
.ads{
display:block;
}
}
Despite the seeming simplicity is quite a tricky question.
Try not to waste time (which has already been spent by other developers) and use one of the existing solutions like isMobile or mobile-detect.js.
This libraries allows you to detect:
is mobile, tablet or desktop;
specific browser version.
operating system;
...
You can do it using CSS3 media queries,
//medium+ screen sizes
#media (min-width:992px) {
.desktop-only {
display:block !important;
}
}
//small screen sizes
#media (max-width: 991px) {
.mobile-only {
display:block !important;
}
.desktop-only {
display:none !important;
}
}
for large resolution devices you can use following media queries,
//large resolutions only
#media (min-width: 1200px) {
...
}
Also if you are using any front-end framework like bootstrap. then you can find some written classes like
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
using these classes you can play around your content to show and hide on specific devices.
http://getbootstrap.com/2.3.2/scaffolding.html
So I have a webpage with a banner (1024 pixels) and then some pictures in the center region below. I'm looking with CSS (or some other alternative) to start resizing all the images (banner and page icons) downwards automatically if the size of the page in the browser is less than the minimum banner width and if it greater than this minimum size, none of the images are scaled (the banner is on a transparent background so it "resizes fluidly").
This seems like a pretty basic question so I doubt it'll really require all that much but all the other references I saw didn't do it for me (and I am really inept at CSS). Any advice is appreciated and thanks in advance!
Use media queries in your CSS - something like this:
#media screen and (max-width: 400px) {
#container {
width:320px;
}
}
#media screen and (min-width: 401px) and (max-width: 900px) {
#container {
width:700px;
}
}
#media screen and (min-width: 901px) {
#container {
width:900px;
}
}
(You can adjust the numbers/brackets).
Then set your image widths as a percentage of the container.
This question has been asked however, not particularly to the effect that I'm trying to accomplish....
I just finished a Javascript course, and wrote a small script for my website.. It uses Gantry Framework and works really well with Mobile Devices.
If you use your phone, and hold your phone horizontal it resizes that page, if you then turn your phone to vertical it resizes the page yet again.
So I wrote this
var cWIDTH = window.innerWidth;
if (cWIDTH < 640 ){
document.getElementById("swapme").style.backgroundImage = "url('/images/backgrounds/top-image2.jpg')";
}
However, it wont change on the fly, for example.. if I turn my phone it wont change the background unless I refresh the page. I have been looking within the files on my site for the Ajax/jQuery/JSON code that seems to react to this change so I could possibly insert a function trigger.
However once the page loads isn't the variable set already until you refresh the page?
How do I get the variable on the fly, and change on the fly as well?
As has been noted, you'd be better off using CSS media queries.
Try something like this:
#media screen and (min-width: 641px) {
#swapme {
background-image: url('/images/backgrounds/top-image1.jpg');
}
}
#media screen and (max-width: 640px) {
#swapme {
background-image: url('/images/backgrounds/top-image2.jpg');
}
}
You need to hook that code you wrote to the window.onresize event, and include an else clause for when the window size is switched back.
Having said that, the result is far easier to achieve without JS at all using media queries.
below some example code i used with phonegap to change the layout. It makes use of the media query's of css 3.
/* Ipad landscape mode */
#media screen and (min-width: 760px) and (max-width: 1024px) and (orientation: landscape) {
article {
float:left;
padding-left: 55px;
}
}
/* Ipad portrait mode */
#media screen and (min-width: 760px) and (max-width: 1024px) and (orientation: portrait) {
article {
float: left;
width: 340px;
padding-left: 15px;
}
}
There is and event that detects when the device orientation changes.
window.onorientationchange = function(e) {
switch(e.orientation) {
case 0:
//...
break;
case -90:
//...
break;
case 90:
//...
break;
default:
break;
}
}
I have a problem with a small mobile image gallery. When I change the orientation to portrait the images are too large to be displayed on the screen.
Is it possible with some javascript to make images fit the screen when the orientation changes to portrait? In landscape mode, everything looks fine.
yes, you can use CSS3 Media Queries without using JavaScript.
#media screen and (max-width: 450px) {
img {
width: 30%;
}
}
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Try this:
#media screen and (orientation:portrait) {
//your css code goes here
}
#media screen and (orientation:landscape) {
//your css code goes here
}