我一直在用这两个媒体查询在我的手机中试验一个简单的网页（请参阅底部有关浏览器等的规范）：
@media all and (max-width: 979px) { ... css setting a background color for a certain element
@media all and (min-width: 980px) { ... css setting another background color for the same element
我通过实验发现使用高于 979/980 的值，即这些似乎是我的手机的值，即如果我增加或减少这两个值，我注意到它们中的另一个被应用了。
但是，我认为我不应该尝试找出这些边界值，而是认为我应该能够使用以下 javascript：
document.write('<br>your resolution is ' + screen.availWidth + ' , ' + screen.availHeight);
上面检测到的 javascript 宽度值与媒体查询中实际工作的值（854 而不是 979）相差一百多个像素。
所以，我的问题是我如何使用javascript（或服务器端代码）来计算设备宽度，并在媒体查询中使用一个有用的值，考虑到'screen.availWidth'显然不起作用（并且'screen.width'也不是作品）？
我的手机是索尼爱立信Xperia Arc S，我使用的操作系统是Android 4.0.4。我用以下三种浏览器做了这个实验：-Chrome 18.0.1025.166-Firefox 14.0-“Opera/9.80 版本/12.00”（不确定 9.80 是什么意思，但我猜版本是 12.00，这个字符串我来自javascript 'navigator.userAgent')
Chrome 浏览器使用上述 javascript 显示这些宽度/高度值：480 x 854 或 854 x 480（取决于我是纵向还是横向） Firefox 浏览器显示与上述 Chrome 相同的宽度/高度值。Opera 浏览器横向显示宽度/高度 854 x 439，纵向显示 480 x 658。
但是，当尝试如上所述应用 CSS3 媒体查询时，所有这些浏览器似乎都使用值 979 而不是 854。