bellmaker
Version:
Responsive CSS media query library for LESS and SASS, with device-agnostic and device-specific breakpoints
11 lines • 3.55 kB
HTML
<html lang=en dir=ltr xml:lang=en prefix="og: http://ogp.me/ns#
fb: http://ogp.me/ns/fb#
foaf: http://xmlns.com/foaf/0.1/
dc: http://purl.org/dc/terms/
v: http://rdf.data-vocabulary.org/#
owl: http://www.w3.org/2002/07/owl#" class="no-js no-touch"> <head> <meta charset=utf-8> <title property=dc:title>Bellmaker, the Media Query Master</title> <!-- browser-specific tags --> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"> <meta name=apple-mobile-web-app-capable content="yes"> <meta name=apple-mobile-web-app-status-bar-style content="black"> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> <meta name=description content=""> <link rel="shortcut icon" href="/c4698475.favicon.ico"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel=stylesheet href=styles/be8af557.main.css> <body> <header role=banner class=bellmaker_container> <h1>Bellmaker</h1> <h2>The Media Query Master</h2> </header> <article role=main class=bellmaker_container> <h2>What am I seeing?</h2> <p><em>Note: this page is entirely driven by CSS. JavaScript is not being used to return the results below.</em></p> <ul> <li><span id=basic_query></span></li> <li><span id=device_sniffer></span></li> <li><span id=aspect_ratio></span></li> </ul> <section> <h3>Bellmaker Device Coverage</h3> <ul> <li><strong>720 HD:2 (720×1280)</strong> <ul> <li>Blackberry Z30</li> <li>Motorola Droid Maxx, Moto G, Moto X(1), Razr HD</li> <li>Samsung GN2</li> <li>Sony Xperia S</li> </ul> </li> <li><strong>768 WXGA:2 (768×1280)</strong> <ul> <li>Blackberry Z10</li> <li>Google Nexus 4</li> </ul> </li> <li><strong>768 WXGA:2.4 (800×1280)</strong> <ul> <li>Nokia Lumia 920, 925, 928</li> </ul> </li> <li><strong>800 WXGA:2 (800×1280)</strong> <ul> <li>Samsung GN1</li> </ul> </li> <li><strong>Full HD:3 (1080×1920)</strong> <ul> <li>Google Nexus 5</li> <li>HTC One M7, M8</li> <li>LG G2</li> <li>Motorola Moto X(2)</li> <li>Samsung GS4, GS5 GN3</li> <li>Sony Xperia Z(1)(2)(3)</li> </ul> </li> <li><strong>WQHD:4 (1440×2560)</strong> <ul> <li>LG G3</li> <li>Google Nexus 6</li> <li>Samsung GN4</li> </ul> </li> <li><strong>Early iPhone (320×480)</strong></li> <li><strong>iPhone 4(s) (640×960)</strong></li> <li><strong>iPhone 5(s)(c) (640×1136)</strong></li> <li><strong>iPhone 6 (750×1334)</strong></li> <li><strong>iPhone 6 Plus (1242×2208)</strong></li> <li><strong>Early iPad (768×1024)</strong></li> <li><strong>iPad (3)(4) (1536×2048)</strong></li> <li><strong>iPad Air (1)(2) (1536×2048)</strong></li> <li><strong>iPad Mini (2)(3) (1536×2048)</strong></li> </ul> </section> <section> <h3>View Documentation:</h3> <ul> <li><a href="https://github.com/herereadthis/bellmaker/">Bellmaker on Github</a></li> <li><a href="http://herereadthis.com/code/bellmaker/">Bellmaker project page at herereadthis.com</a></li> </ul> </section> </article> <script src=scripts/e0099dcf.vendor.js></script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');</script> <script src=scripts/b6c3df09.main.js></script>