Mink Machine

Media queries and JavaScript

Mobile development and responsive design are all the rage these days and media queries are mentioned everywhere. It’s a CSS3 extension of the media types frequently used in HTML4 and CSS2. The following (very simplified) example hides a sidebar if the browser device has a max width of 500 pixels.

@media (max-device-width: 500px) { .sidebar { display: none; } }

This is of course only the tip of the iceberg. There are tons of resolutions and variations to consider (for instance have a look at Andy Clarke’s Hardboiled CSS3 Media Queries), media queries are not supported by IE8 or older (live with it) and so on. But when used correctly, media queries can be a powerful tool.

However, media queries are indeed a nice asset when it comes to CSS, but unfortunately they will not prevent the browser from downloading many other things which may be superfluous on mobile devices.

Since many external scripts are large, this could be a problem. For instance, the minified and Gzipped version of JQuery is about ten times smaller in filesize than the regular version. It could also download a lot of images which may be unused on certain devices.

It would be nice to have a media query equivalent for JavaScript and other resources. There are some work-arounds, such as the one described by Peter-Paul Koch in Combining media queries and JavaScript, but I hope this area will improve in the future.

Related posts

Comments

No comments yet.

Post a comment

Your email address will not be published. Required fields are marked *

Featured stories

The fairytale castles of Sintra

The fairytale castles of Sintra

"The Portuguese town of Sintra is famous for many beautiful castles. Palácio Nacional da Pena is arguably the most stunning of the lot. "
The lakes of Lombardy

The lakes of Lombardy

"The town of Como, largest settlement around Lake Como, attracts a lot of people with big wallets. But I preferred to take the funicular up the mountain to the Brunate region, where you get a much better view of the lake."
Road trip across the American Southwest

Road trip across the American Southwest

"We drove along Route 6, Route 66 and Route 666. If there was a Route 6666, we must have missed that turn."
Having champagne in Champagne

Having champagne in Champagne

"We roamed the damp and chilly tunnels and stumbled upon a large barrel delivered by Napoleon himself."
The sound of Salzburg

The sound of Salzburg

"It is based on the true story of Maria von Trapp, even though I suspect she didn’t go singing alone in the mountain ranges."
The streets of Paris

The streets of Paris

"One of the advantages of repeated visits to a place is the leisure pace of awe and discovery while drifting slowly down the worn streets of the French capital."

Instagram

Seville
Venice
Gothenburg
Fever Ray
Rome
Basel
Singapore
Kuala Lumpur