Skip to content

Instantly share code, notes, and snippets.

@alejandronanez

alejandronanez/index.html

Last active August 29, 2015 14:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alejandronanez/a0b2863562a00f4fe6fe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alejandronanez/a0b2863562a00f4fe6fe to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. alejandronanez revised this gist Jun 11, 2014. 2 changed files with 0 additions and 0 deletions.
    0 jsbin.xemir.html → index.html
    View file
    File renamed without changes.
    0 jsbin.xemir.css → style.css
    View file
    File renamed without changes.
  2. alejandronanez created this gist Jun 11, 2014.
    34 changes: 34 additions & 0 deletions jsbin.xemir.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    #ipad-landscape {
    display: none;
    }

    #ipad-portrait {
    display: none;
    }

    #ipad-both {
    display: none;
    }

    /* iPads (portrait) ----------- */
    @media screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
    #ipad-portrait {
    display: block;
    }
    }

    /* iPads (landscape) ----------- */
    @media screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
    #ipad-landscape {
    display: block;
    }
    }

    /* iPads (portrait and landscape) ----------- */
    @media screen and (min-width : 768px) and (max-width : 1024px) {

    #ipad-both {
    display: block;
    }

    }
    20 changes: 20 additions & 0 deletions jsbin.xemir.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="description" content="[add your bin description]" />
    <meta charset=utf-8 />
    <title>Welcome to JS Bin</title>
    <meta name="viewport" content="width=device-width">
    </head>

    <body>

    <p id="ipad-landscape">Only iPad Landscape</p>

    <p id="ipad-portrait">Only iPad Portrait</p>

    <p id="ipad-both">Both iPad - Portrait / Landscape</p>


    </body>
    </html>