how to calculate width and height of mobile device

Question

i want to create a div under document.body. The width and height of that div should be such that it exactly fits the mobile device, now that device can be a tablet like an ipad or a mobile deivce like iPhone, or any web page on desktop browsers. i tried with screen.width, and screen.height, but these values are not exactly equal to device width and height, then empirically i tried subtracting some number form it. and got 18 which avoid scrolls on document.body when width and height of that div = sreen.width and screen.height. but even this numbers are not consitent on all browsers.

I also have one more question, on iphone if we change the view from portrait to landscape, why does the font size change? i have this meta tag on the html page

Answer 1

Try to use the PHP browser detection library

It provides lot of information about OS, browser, and much more.

Answer 2

You can use jQuery:

var w = $(document).width();
var h = $(document).height();
//your div, for example with class 'loremIpsum', will get exactly that sizes with:
$('div.loremIpsum').width(w).height(h);