CSSとのモバイル非互換性

Question

このコードを使用すると、自分のウェブサイトがモバイルで動作しなくなることがあります。私は体の最初の行にdivを持っています。これは、ロードされたとき、クリックされたとき、背景がぼやけているとき、そして実際のイメージがスパンで先行しているときに設定します。私は、コードに何が間違っているかを知りたがっています。しかし、解決策が見つからない場合は、モバイルプラットフォームでCSSコードの特定の範囲を無効にする方法はありますか？

div { 
    height:100%; 
    width:100%; 
    background-size:cover; 
    -webkit-filter: blur(50px); 
    -moz-filter: blur(50px); 
    -o-filter: blur(50px); 
    -ms-filter: blur(50px); 
    filter: blur(50px); 
    position: absolute; 
    left:0; 
    top: 0; 
} 

span { 
    z-index:9999; 
    -webkit-filter: blur(0px); 
    -moz-filter: blur(0px); 
    -o-filter: blur(0px); 
    -ms-filter: blur(0x); 
    filter: blur(0px); 
} 

Answer 1

あなたは画面サイズを使用して、モバイルプラットフォームを参照している場合さて、あなたは@mediaクエリを使用することができます。そうでなければ、javascriptを使用してhtmlタグの先頭に属性を挿入し、それを使用してターゲットデバイスに固有のcssコードを分離することができます。

https://github.com/rafaelp/css_browser_selector