平板电脑景观特定于媒体查询

Question

我有一个“响应式”网站，但我只想在“个人电脑浏览器”上使用一些链接而不是“平板电脑风景”，因为它们会链接到闪存对象。

到目前为止，这是我所做的，但它不是100％修复，因为一些Android平板电脑，如'联想思想垫'，有更大的屏幕。

我正在使用媒体查询来使我的网站响应，这就是我目前正在使用的...

@media only screen  
and (max-device-width : 1024px)     
and (orientation:landscape)
{
    header.Site
    {
        nav.Site > ul > li { line-height: 2 ; }

        div.BidSessionCountdown,
        a.LiveOnline { display: none; }
    }
}

你能想到任何CSS修复？

提前谢谢你 塔什：D

Answer 1

使用媒体查询实际上并不适合检测是否支持闪存。我的建议是使用JavaScript确定这个，并为body元素分配一个类，例如“no-flash”。您的JavaScript可能如下所示：

//Using jQuery here
if(typeof navigator.plugins['Shockwave Flash'] == 'undefined') {
    $('body').addClass('no-flash');
}

然后，您的CSS可能如下：

body.no-flash a.LiveOnline {
    display:none;
}

注意：检查导航器插件的javascript代码来自Here.

Answer 2

当您使用方向：横向时，您必须考虑键盘弹出窗口是否会更改显示，一旦宽度尺寸大于高度尺寸，css会将其视为横向。