覆盖设备宽度

Question

我正在一个网站上工作，我试图通过在我的HTML中添加<meta name="viewport" content="width=device-width">来使其适合移动设备。

不幸的是，我的元素需要大于设备宽度。我打算使用媒体查询在不同的屏幕尺寸上硬编码此元素的值，但似乎我无法覆盖元素宽度。

这是我要覆盖其宽度的元素：

<div id="menu_bar">

目前，我可以覆盖此元素宽度的唯一方法是：

<div id="menu_bar" style=" width: 1024px;">

但是，如果我这样做：

<style>
    #menu_bar {width : 1024px;}
</style>
<div id="menu_bar">

它不起作用。即使添加!important也无效。我需要能够以第二种方式实现它，因为我需要使用媒体查询。

仅供参考，我将菜单栏作为ruby on rails部分，因为在我的网站的每个页面上。

知道如何覆盖菜单栏的宽度以便我可以使用媒体查询吗？

非常感谢任何帮助。

Answer 1

尝试转到http://atmedia.info/ - 它将扫描您的设备（刷新以纵向和横向重新扫描它） - 它会告诉您一些与您的设备匹配的媒体查询。假设你还没有解决过你的问题。

这个元标记组合似乎对我有帮助..我使用媒体查询来匹配min-width和min-height（最大也是）的设备

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="mobileoptimized" value="0" />