我正在使用插件在我的网站上添加社交分享按钮 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 不适用于移动浏览器。请引用以下屏幕截图 -
按钮在移动 View 中损坏 http://itsfromindia.net/mobile.png
虽然当调整到小窗口时它们在桌面浏览器上看起来不错。 http://itsfromindia.net/desktop.jpg
请告诉我出了什么问题。
最佳答案
您需要添加一个 meta <head> 中的标签告诉移动浏览器不要扩展您的网站。
在 <head> 中添加这个您的文档，它应该按您的预期工作:
<meta name="viewport" content="width=device-width">
更多信息 here
关于html - 我的 css 不适用于移动浏览器，但它适用于调整大小的桌面浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23789828/