覆盖设备宽度

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也不起作用。 我需要能够以第二种方式进行操作，因为我需要使用媒体查询。

仅供参考，我在菜单栏上使用了部分红宝石，因为在我网站的每个页面上。

任何想法如何覆盖菜单栏的宽度，以便我可以使用媒体查询吗？

任何帮助是极大的赞赏。

Answer 1

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

这个meta标签组合似乎对我有帮助。我使用媒体查询以最小宽度和最小高度（以及最大）匹配设备

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