我的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不适用于移动浏览器，但它适用于调整大小的桌面浏览器

回答

相关问题