HTML5 Media Queries, Tablet Verses Phone, Anything but Intuitive

Updated: at 11:18 PM

 

 

Background and Introduction

I’m building a mobile touch application that uses SenchaTouch 2 on the client and Microsoft’s ASP.NET EF Code First on the server.  Things have been moving along pretty quickly because both of these toolkit’s are awesome.  I got stuck for about 2 hours on what I thought should be a very simple problem.  I’ve basically got a two panel application where on the left panel I want to be able to show a “display second panel” button if I’m on a small screen, and if I’m on a big screen I don’t want to show that button, but I do want to show the second panel.  Basically, here is what I want my app to look like using HTML5 Media Queries.

 

Tablet Mode

Phone Mode
image image

 

Notice that the Tablet Mode is wider than 480 pixels and the Phone Mode is narrower (OK, take my word for it).  As you collapse the browser you will see it automatically change.

 

How It Works

Basically, an HTML5 media query is no more than letting you have CSS that only gets run under certain circumstances.  That is, the browser window is less than a certain width (or great than), or even something like printing.  I first got introduced to media queries a while back when at our code camp (Silicon Valley Code Camp), we had people complaining that when they printed their schedules, it included all our “junk” on the left and right margins.  The solution was to use a media query that said “if printing, add a special css to those columns telling them not to show”.

 

My Problem and Solution Today

The media query itself that you put in your css looks like the following:

@media only screen and (max-width:480px) {
           .showOnTablet {
               display: none;
           }
       }

It’s actually pretty simple.  It says anything you assign the class “showOnTablet” to, will render it invisible.  If you think about it, you could order the problem I outlined above lots of ways.  The “if” statements are very stragiht forward (or so I thought).  It may be (OK, likely is) my lack of understanding of CSS, but at the end of the day, to make the Media Query work, this is what I had to do in my css (style) file.

1.  Set all my DOM elements I want to display to visible.

2.  Create a media query for each item I want to make invisible.

 

Sound simple right?

So, here is what does not work.

1) Have one media query for each object (div or span) that sets one item visible and one item invisible

2) Set both objects (div or span) to invisible, then have the media query make them visible

I would not 100% swear to what does not work, but I can promise if you follow what I show does work, that will work for you also.

 

The HTML Page (finally)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Brain Bashing With HTML5 Media Queries</title>
    <style type="text/css">

    .floatRight {
        float: right;
        margin-top: 10px;
        padding: 5px;
        background: Yellow;
        border-radius: 22px;
    }

    .left {
        margin-top: 10px;
        padding: 5px;
        background: red;
        border-radius: 10px;
    }

    .showOnTablet {
        display: visible;
    }

    .showOnMobile {
        display: visible;
    }

    @media only screen and (max-width:480px) {
        .showOnTablet {
            display: none;
        }
    }

    @media only screen and (min-width:481px) {
        .showOnMobile {
            display: none;
        }
    }
<span class="kwrd">&lt;/</span><span class="html">style</span><span class="kwrd">&gt;</span>


</head>
<body>
<div>
<div class=“showOnTablet floatRight”>
RIGHT PANEL
</div>
<div class=“left”>
LEFT PANEL

<button type=“button” class=“showOnMobile”>
Show Panel Info (not really)</button>
</div>
</div>


</body>
</html>