Question

我正在使用插件在我的网站wondertacular.com上添加社交分享按钮。它们在宽屏幕上看起来很棒，但在小屏幕上看起来很混乱。所以我添加了以下css来覆盖默认的css并使这两个大的水平共享按钮响应。

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

当我将桌面浏览器（chrome和ff）调整为小宽度窗口时，它运行良好但是当我在移动浏览器（chrome，FF，Opera）中打开此页面时，我没有看到任何更改。似乎我的CSS不适用于移动浏览器。请参考以下屏幕截图 -

按钮在移动视图中被破坏 http://itsfromindia.net/mobile.png

虽然在调整小窗口时它们在桌面浏览器上看起来很好。 http://itsfromindia.net/desktop.jpg

请告诉我哪里出错了。

Answer 1

您需要在meta中添加<head>标记，以告知移动浏览器不要扩展您的网站。

在文档的<head>中添加此内容，它应该可以正常运行：

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

更多信息here

Answer 2

您是否尝试添加特定于浏览器的CSS，例如：

-webkit-（safari / chrome）

-o-（歌剧）

-ms-（IE）

-moz-（firefox）

它有助于您的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;
      }
  }

不确定这是否是解决方案，但它不会受到伤害！

我的css并不适用于移动浏览器，但它适用于调整大小的桌面浏览器

2 个答案: