Search code examples
javascripthtmlandroid-browsermonochrome

Javascript: detect monochrome display

I've been testing an HTML5 webapp on eReaders, and I got it mostly working, but the colors are all messed up (it's monochrome). My app uses lots of colors with an update every second. I need this to run on colored displays as well, so I need to detect if it's monochrome.

The eReader that I'm using is made by Sony, and it reports screen.pixelDepth and screen.colorDepth as both 16, which IS different than most other devices I support (24 and 32 are common).

My ideas so far are:

  • Always display monochrome to devices that report 16-bit color
  • Sniff from User-Agent / navigator.appVersion
  • Sample bits from canvas (though I assume that may lie as well)

Is it safe to assume that 16-bit color = monochrome? Or is there another trick that I could be overlooking that would be more reliable?

Solution

  • In computing, "monochrome" is usually 2 bit, a 16 bit display is usually called greyscale (though it might be in shades of some other colour).

    Consider using a palette where the colours convert to appropriate 16 bit values rather than device sniffing. You could start with the web safe colour palette.

    Alternatively, give users an option to "use greyscale" if they think that will look better—you may find other users selecting that option too. If your colours are all class based, you could either replace a current stylesheet or add a new one with appropriately reassigned colours.