- From: Charles Pritchard <chuck@jumis.com>
- Date: Sun, 19 Feb 2012 14:08:57 -0800
- To: Lea Verou <leaverou@gmail.com>
- CC: Felix Miata <mrmazda@earthlink.net>, www-style@w3.org
On 2/19/12 1:58 PM, Lea Verou wrote: > On 19/2/12 22:47, Charles Pritchard wrote: >> It's no fun though. About 15 lines of CSS. > What 15 lines of CSS do you have in mind? When I needed to detect > physical DPI or physical screen size in Gecko, I had to resort to > JavaScript & matchMedia. Here's part of the chain I use. With webkit, I use a nasty hack comparing outer and inner client width. There are a few areas in CSSOM that could be a little more author-friendly. I suppose that's what this thread is about. I've not checked how matchMedia is working in the current FF. It -may- have been a different code path (and not worked) in earlier versions. matchMedia doesn't work for browser zoom in WebKit (last I checked). /* CSS feature testing */ #canvas.CompatibilityScreen { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } /* // http://kb.mozillazine.org/Toolkit.zoomManager.zoomValues */ #canvas.CompatibilityMozScreen { width: 1px; } @media all and (min--moz-device-pixel-ratio: 1.1) { #canvas.CompatibilityMozScreen { width: 1.1px; } } @media all and (min--moz-device-pixel-ratio: 1.2) { #canvas.CompatibilityMozScreen { width: 1.2px; } } @media all and (min--moz-device-pixel-ratio: 1.33) { #canvas.CompatibilityMozScreen { width: 1.33px; } } @media all and (min--moz-device-pixel-ratio: 1.5) { #canvas.CompatibilityMozScreen { width: 1.5px; } } @media all and (min--moz-device-pixel-ratio: 1.7) { #canvas.CompatibilityMozScreen { width: 1.7px; } } @media all and (min--moz-device-pixel-ratio: 2) { #canvas.CompatibilityMozScreen { width: 2px; } }
Received on Sunday, 19 February 2012 22:09:22 UTC