メディアクエリに特有のタブレットの風景

Question

私は「応答性の高い」ウェブサイトを持っていますが、「パソコンのブラウザ」のみで、「タブレットの風景」ではなく、リンクしているリンクがいくつかあります。

これまでのところ私がやったことですが、画面が大きくなった「Lenovo think pad」などのアンドロイドタブレットとしては100％修正されていません。

@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を使ってこれを判断し、 "no-flash"のようなbody要素にクラスを割り当てることです。あなたの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

から来ていますorientation：landscapeを使用すると、キーボードポップアップがディスプレイを変更するかどうかを考慮する必要があります。幅のサイズが高さのサイズよりも大きくなると、cssはそれをランドスケープと見なします。