According to Why is 1366x768 considered by some to be the standard widescreen for modern laptops?, screen resolution 1366x768 is most frequently used from desktop , the 2nd frequently used resolution is 1024x768.
So for a web UI designer, 1024x768 is the safe solution, because a 1024-pixels-width web page on a wider screen (1366 pixels) looks ok, while people have to scroll horizontally to view a 1366-pixels-wide web page on a 1024 screen.
For Axure RP, 960 pixels width is preferred: right click on the wireframe window of a page, select "Grid and Guides -> Create Guides -> Presets: 960 Grid 12 Column".
The following is a Meteor app that detect screen and browser size on the fly.
$ cat getDimension.js
if (Meteor.isClient) {
Session.setDefault("bro_wid", $(window).width());
Session.setDefault("bro_hei", $(window).height());
Session.setDefault("scr_wid", screen.width);
Session.setDefault("scr_hei", screen.height);
Meteor.startup(function () {
$(window).resize(function(e) {
Session.set("bro_wid", $(window).width());
Session.set("bro_hei", $(window).height());
Session.set("scr_wid", screen.width);
Session.set("scr_hei", screen.height);
});
});
Template.getDim.helpers({
bro_wid: function () {
return Session.get("bro_wid");
},
bro_hei: function () {
return Session.get("bro_hei");
},
scr_wid: function () {
return Session.get("scr_wid");
},
scr_hei: function () {
return Session.get("scr_hei");
}
});
}
$ cat getDimension.html
<head>
<title>Window Size Detector</title>
</head>
<body>
<h1>Window Size Detector</h1>
<div> <b>Resize your browser window ...</b> <hr> </div>
{{> getDim}}
</body>
<template name="getDim">
<div> Browser window width: {{bro_wid}} </div>
<div> Browser window height: {{bro_hei}} </div>
<div> Screen width: {{scr_wid}} </div>
<div> Screen height: {{scr_hei}} </div>
</template>
Ref:
Get the size of the screen, current web page and browser window
How to Make My Website Fit Any Resolution