Tag Archives: CSS

matchMedia in JavaScript

How to use matchMediaLet's dig in into JavaScript and matchMedia usages. For those who doesn't know what matchMedia is, let me explain. You probably know what Media Queries in CSS are. You can match the max-width for instance to check if You are on mobile device etc. But sometimes CSS is not enough and You have to execute additional code in JavaScript when particular break point in Media Query has been reached. Here matchMedia comes with help:D

Before matchMedia

Before I knew about matchMedia I used onResize event a lot. Every time I checked the width of the screen and for instance if it was lower than 400 pixels I executed the code. But there were two main problems. Getting width of the viewport was usually problematic when I used different browsers. Second problem was that viewport width wasn't always coincide with particular Media Query. For instance when I tried to check if I have 480 pixels media query was executed and CSS rules was changed, but JS code wasn't executed. It drives me mad...

After that I learned how to use matchMedia and it solves my problems (almost)

How to use matchMedia

Usage is really simple. Let's assume that we wan't to check this in JavaScript:

@media all and (max-width: 480px){
 /* Some CSS here... */
}

We will try to target all media that viewport is less or equal to 480 pixels. OK, now the fun part in JS:

var mql = window.matchMedia('all and (max-width: 480px)');
if (mql.matches) {
    //Yes, media query matches, we are 480px or less
} else {
    //No match here, sorry...
}

We create matchMedia by window.matchMedia('here should be your rule');  Basically it's copy+paste from CSS @media rule.

Now we check if it match the CSS by mql.matches If it match we are executing the code or not. And basically... that's it! Now You know how to use matchMedia, really simple, isn't it?

matchMedia and resize event using addListener

OK, but how can we handle dynamic screen resizing? How to wait for changes? For instance I want to execute some action every time screen will reach 480px. For instance let's load mobile ads when we are under 480 pixels and load normal ads when we are above 480px. I will use previous code with some extra stuff:

var handleMatchMedia = function (mediaQuery) {
        if (mediaQuery.matches) {
            //load mobile ads
        } else {
            //load desktop ads
        }
    },
    mql = window.matchMedia('all and (max-width: 480px)');

handleMatchMedia(mql); //Execute on load
mql.addListener(handleMatchMedia); //Execute each time media query will be reached

First of all we have to create function that will handle the matchMedia (handleMatchMedia). After we define it we have to execute the function for the first time. We need to check on page load if we are already in 480px media query or not. Line below we have to add listener to matchMedia. In parameter we have to pass the function that will be executed when viewport will be in media rule.

You have to know that this code won't be executed on every screen resize. Function will be executed ONLY when viewport size will be 480px.

Browser support, polyfills

Generally what is really big plus it that it's widely supported: http://caniuse.com/matchmedia

Problem is on Internet Explorer of course is on IE9 and below. But there is really simple solution for that - polyfills. Here is one of the most popular I think:

https://github.com/paulirish/matchMedia.js/

I remember having problems on IE7 and IE8 with this, but there is nice extension for this polyfill here:

https://github.com/benschwarz/matchMedia.js/tree/IE7-8

 

iPhone and iPad CSS hacks

iOS devicesHello guys

Today it'll be short post (but hopefully I will add here new hacks later on) about CSS on iPhone and iPad. It should work as well on any mobile Web-kit based browser.

When it comes to styling webiste usually I'm checking it in my desktop browser. Everything seems to works fine but when I run website on my iPhone or iPad, strange things happens. Here are some short fixes for problems I encountered.

Preserver font sizing on orientation change in iPhone and iPad

html {
    -webkit-text-size-adjust: 100%;
}

The problem is that when You load the website on iPhone fonts looks normal. But when You rotate the screen and change orientation fonts become much more bigger than normal. It shouldn't suppose to happen. So here is quick fix for this problem:)

There is also second version of this solution. To use none instead of 100%. But when You use none it will disable zoom behavior in default browsers.

Remove input shadows and rounded corners on iOS devices

input {
  -webkit-appearance: none;
  border-radius: 0;
}

Second problem is default styling provided by Web-kit browser on iPhone and iPad. All inputs have shadow and rounded corners. First rule turn off input appearance and it will remove shadows in our inputs.

Setting border radius to 0 will remove rounded corners in our inputs.