啓用水平滾動僅限手機/禁用Dekstop

Question

我正在使用Wordpress創建網站。

我需要使ImageMap插件響應。唯一的解決方案是讓它在移動設備上滾動。因爲如果圖像製作爲width:100%;和overflow-x:scroll;，它也可以在Dekstop上滾動。

我也試過：@media screen and (min-width:360px) and (max-width: 480px)。也許在這段代碼中存在問題，所以搜索並嘗試了每個來自stackoverflow.com的答案，都沒有幫助。 My Site

爲該插件做了一張票，但我需要快速回答，客戶端正在等待。

如何在移動設備上實現滾動，而dekstop響應使用CSS？

@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工作自上而下的東西進一步下跌將在頁面高出賴特的東西。所以，你有什麼

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

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

所以無論發生什麼事，因爲它不是由一個條件語句包圍，並進一步下跌的頁面溢出-X將始終被隱藏。所以要解決它或者把@media的東西放在css的底部，或者把一個條件語句放在一般的東西上。更好的選擇是重新安排CSS，除非你期望瀏覽器不能處理@media標籤。

旁註：你爲什麼關心最小寬度？在360px寬度下發生什麼不同？如果不是，那麼你不需要最小寬度語句，這應該節省一點點的帶寬，並幫助頁面加載更快一點點。