DarkMatter in Cyberspace
  • Home
  • Categories
  • Tags
  • Archives

Preferred Web Browser Resolution When Developing a Website


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

In Search of the Holy Grail

How to Make My Website Fit Any Resolution



Published

Jan 14, 2015

Last Updated

Jan 14, 2015

Category

Tech

Tags

  • detect 1
  • resolution 1
  • web 16

Contact

  • Powered by Pelican. Theme: Elegant by Talha Mansoor