media - 特定于媒体查询的平板电脑环境

Question

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

到目前为止，这是我所做的，但它不是 100% 修复，因为某些具有更大屏幕的 android 平板电脑，例如“Lenovo think pad”。

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

@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

使用媒体查询并不是检测是否支持 Flash 的合适技术。我的建议是使用 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.