Develop Reference

How to not load images for smaller screen

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');
}
}
);

How to adjust contents to automatically fit size of the screen?

I have an requirement that an application(HTML, CSS and Javascript) should adjust automatically to screen window size - from laptops, to desktops to tablets.
Does anyone know how can this be done?

You need to study Responsive Design. But I'll tell you the big key: media queries.
With CSS like this
#media only screen and (max-width: 500px) {
#mydiv {
width: 80%;
}
}
#media only screen and (min-width: 501px) {
#mydiv {
width: 50%;
}
}
you can do all you need. In fact, for some screen sizes you can set #menu1 to display:none, and #menu2 to display:block, and thereby show entirely different layouts dynamically based on the screen size.
Try this link for a very minimal example you can play with
http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints

How can I make an ad visible only to mobile users?

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

Automatically Resize Images After Certain Width

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.

Change Background Image on Fly

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;
}
}