水平スクロールを有効にするモバイル専用/デックストップで無効にする

Question

Wordpressでウェブサイトを作成しています。

私はImageMapプラグインをレスポンシブにする必要があります。唯一の解決策は、モバイルデバイスでスクロール可能にすることです。イメージがwidth:100%;とoverflow-x:scroll;で再配置された場合、それもDekstopでスクロール可能です。

私も試しました：@media screen and (min-width:360px) and (max-width: 480px)。おそらく、このコードに問題があったので、stackoverflow.comからのすべての回答を検索して試してみたところ、役に立たなかったと思いました。 My Site

そのプラグインのチケットを作ったが、私は速い答えが必要で、クライアントが待っている。

CSSを使用してdekstopを応答しながら、モバイルでのみスクロールする方法はありますか？

@media screen and (min-width:360px) and (max-width: 480px){ 
 
    #image-map-pro-3521{ 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    overflow-x:scroll; 
 
    overflow-y:hidden; 
 
    -webkit-overflow-scrolling:touch; 
 
    } 
 
    .container { 
 
     position:relative; 
 
     width:100%; 
 
     overflow-x:scroll; 
 
    } 
 
} 
 

 
#image-map-pro-3521{ 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0px; 
 
    top: 0px; 
 
    overflow-x:hidden; 
 
    -webkit-overflow-scrolling:touch; 
 
} 
 
.imp-wrap{ 
 
    min-width:100%; min-height:100%; width:auto; height:auto; 
 
} 
 
.container{ 
 
    position:relative; 
 
    width:100%; 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.container .row { 
 
    margin:0; 
 
}

Answer 1

CSSは、ページ内の高いライトの何かの上にさらにダウントップダウンと何かをします動作します。だから、あなたが持っているものそれが条件文に囲まれており、ページのさらに下でされていないとして、オーバーフロー-xが常に表示されませんどーでも

@media screen and (min-width:360px) and (max-width: 480px){ 
#image-map-pro-3521{ 
overflow-x:scroll; 
} 

#image-map-pro-3521{ 
overflow-x:hidden; 
} 

です。だから、それを修正するには、@ mediaのものをCSSの一番下に置くか、一般的なものの周りに条件文を置いてください。より良いオプションは、@ mediaタグを処理できないブラウザを期待しない限り、CSSを再配置することです。

サイドノート：なぜ最小幅が心配ですか？ 360pxの幅で何か違うものがあれば何が起きますか？そうでなければ最小幅ステートメントは必要ありませんが、これは少しの帯域幅を節約し、ページ読み込みに手間をかけずにすみます。