Working jsFiddle
example: http://jsfiddle.net/A5Hk5/2/
Everything you want to do is check screen width on window resize event, if width is lower then some value (in case off my example it is 640px) then set its display to none, else it is block or visible.
This solution uses em to px conversion, methods can be found below. Conversion functions taken from HERE.
$(document).on('pagebeforeshow', '[data-role="page"]', function(){
$(window).resize();
});
$(window).resize(function() {
$(".ui-btn").css({display: window.innerWidth >= $(33).toPx() ? "block" : "none"});
});
$.fn.toEm = function(settings){
settings = jQuery.extend({
scope: 'body'
}, settings);
var that = parseInt(this[0],10),
scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;"> </div>').appendTo(settings.scope),
scopeVal = scopeTest.height();
scopeTest.remove();
return (that / scopeVal).toFixed(8);
};
$.fn.toPx = function(settings){
settings = jQuery.extend({
scope: 'body'
}, settings);
var that = parseFloat(this[0]),
scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;"> </div>').appendTo(settings.scope),
scopeVal = scopeTest.height();
scopeTest.remove();
return Math.round(that * scopeVal);
};