我的CSS不適用於移動瀏覽器，但它適用於調整大小的桌面瀏覽器

我正在使用插件在我的網站上添加社交分享按鈕wondertacular.com。他們在寬屏幕上看起來不錯，但在小屏幕上看起來很亂。所以我添加了下面的CSS來覆蓋默認的CSS，並使這兩個大的水平共享按鈕響應。我的CSS不適用於移動瀏覽器，但它適用於調整大小的桌面瀏覽器

@media (max-width: 600px) { 
    .essb_displayed_both li { 
     display: block; 
     white-space: nowrap; 
     margin-bottom: 20px !important; 
    } 
}

它運作良好，當我調整桌面瀏覽器（Chrome和FF），以小窗口的寬度，但是當我在移動瀏覽器中打開此頁面（鉻，FF，歌劇）我沒有看到任何變化。看來我的CSS不適用於移動瀏覽器。請參考下面的截圖 -

按鈕移動視圖 http://itsfromindia.net/mobile.png

而當調整到小窗口，他們看起來在桌面瀏覽器很好的打破。 http://itsfromindia.net/desktop.jpg

請告訴我什麼是錯的。

來源

2014-05-21 rkb

你嘗試添加瀏覽器特定的CSS，如：

-webkit-（Safari /鉻）

-O-（歌劇）

-ms-（IE）

-moz-（火狐）

它有助於使您的CSS跨瀏覽器兼容，並可以幫助您的移動瀏覽器。

@media (max-width: 600px) { 
    .essb_displayed_both li { 
     display: block; 
     white-space: nowrap; 

     -webkit-margin-bottom: 20px; 
     -o-margin-bottom: 20px; 
     -ms-margin-bottom: 20px; 
     -moz-margin-bottom: 20px; 
     } 
    }

不知道如果這是解決方案，但它不能傷害！

來源

2014-05-21 17:26:35 amandathewebdev

它不只是下邊距，一切都沒有在手機工作。據我所知，保證金底部適用於所有移動瀏覽器，無需瀏覽器特定的CSS。 – rkb

你能提供代碼嗎？ jsfiddle也許？看起來你有一些內聯樣式，它們可能會覆蓋你的一些移動樣式。 – amandathewebdev

此外，也許這將有所幫助http://alistapart.com/article/return-of-the-mobile-stylesheet – amandathewebdev

您需要在<head>中添加一個meta標記，以告訴移動瀏覽器不要縮放您的網站。

在文檔的<head>添加這和你希望它應該工作：

<meta name="viewport" content="width=device-width">

更多信息here

來源

2014-05-21 18:15:26 willanderson

希望爲那些可能發生在這個問題上的人添加你可能仍然得到OP的描述行爲在一些小設備視口，如果你不添加一個初始比例。我認爲這是糟糕的瀏覽器渲染引擎的實現，圍繞縮放相關代碼。出於這個原因並且通常禁用縮放，我寧願使用： –

我的CSS不適用於移動瀏覽器，但它適用於調整大小的桌面瀏覽器

回答

相關問題