JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.1.1/docs/_assets/css/jqm-docs.css">
<ul data-role="listview" data-inset="true">
<li><a href="#">foo</a></li>
<li><a href="#">bar</a></li>
<li><a href="#">hoge</a></li>
<li><a href="#">huga</a></li>
<li><a href="#">piyo</a></li>
</ul>
JavaScript
/*
sizeit.js
by John Polacek (@johnpolacek)
Docs: http://johnpolacek.github.com/sizeit.js/
License: http://www.opensource.org/licenses/mit-license.php
*/
(function()
{
var config = {};
var screenW;
function windowSize() {
var wSize;
// Internet Explorer
if (document.body && document.body.offsetWidth) {
wSize = document.body.offsetWidth;
}
// Internet Explorer
else if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
wSize = document.documentElement.offsetWidth;
}
// All other browsers
else if (window.innerWidth) {
wSize = window.innerWidth;
}
return wSize;
}
function update() {
screenW = windowSize();
var newSize;
var i;
for (i = 0; i < config.settings.length; i++) {
var setting = config.settings[i];
if (screenW < setting.max) {
newSize = setting;
break;
}
else if (!setting.max) {
newSize = setting;
}
}
if (!config.size || newSize.name != config.size.name) {
config.size = newSize;
} else {
newSize = null;
}
if (config.size.css && newSize) {
// If there is a stylesheet, update it, otherwise make new
if (config.css) {
var links = document.getElementsByTagName('link');
for (i = 0; i < links.length; i++) {
if (links[i].getAttribute('title') == 'sizeit') {
config.css.href = config.size.css;
break;
}
}
}
else {
config.css = document.createElement('link');
config.css.href = config.size.css;
...