我正在建造一个卡路里计算器。它有一个饮食过滤器。如果选择饮食，那些不适合饮食的食物会变得灰白无法点亮。这适用于桌面，但是，在移动设备上它无法达到预期的效果。什么可能是错的？
这是现场直播：
http://www.padthai.decorolux.com/Calorie/
这里还有一支笔：
https://codepen.io/Pbalazs89/full/GxYdOY
// Filters + Description text setup
$(document).on('click', '.diet-filter-button', function () {
var map = {
vegan: {
attr: 'vegan',
desc: 'veganDescription'
},
vegeterian: {
attr: 'vegetarian',
desc: 'vegetarianDescription'
},
gluten: {
attr: 'glutenfree',
desc: 'glutenFreeDescription'
},
lactose: {
attr: 'lactoseFree',
desc: 'lactoseFreeDescription'
},
addedSugar: {
attr: 'noAddedSugar',
desc: 'noAddedSugarDescription'
}
},
diet = $(this).data('diet'),
filtered = $(this).hasClass("filtered");
if (filtered) {
$(this).removeClass("filtered");
$(".ingredient:not([" + map[diet]['attr'] + "])").fadeTo(1000, 1).css("pointer-events", "auto");
$("#" + map[diet]['desc']).css("opacity", "0");
} else {
$(this).addClass("filtered");
$(".ingredient:not([" + map[diet]['attr'] + "]").fadeTo(1000, 0.5).css("pointer-events", "none");
$("#" + map[diet]['desc']).css("opacity", "1");
}
});
HTML
<div id="contenttable">
<div class="dropdown">
<div class="dropdownmenu">
<button class="dropbtn main">Diet or Allergen Filter <i class="fa fa-sort-up" style="line-height:0px; margin-left: 5px;"></i></button></div>
<div id="myDropdown" class="dropdown-content">
<a id="veganDiet" class="dropbtn2 diet-filter-button" data-diet="vegan"> Vegan</a>
<a id="vegetarianDietButton" class="dropbtn2 diet-filter-button" data-diet="vegeterian"> Vegetarian</a>
<a id="noGlutenButton" class="dropbtn2 diet-filter-button" data-diet="gluten"> Gluten-Free</a>
<a id="noLactoseButton" class="dropbtn2 diet-filter-button" data-diet="lactose"> Lactose-Free</a>
<a id="noAddedSugarButton" class="dropbtn2 diet-filter-button" data-diet="addedSugar"> No Added Sugar</a>
</div>
</div>
<div class="maindish">
<div id="VeganNoBaseSauce"></div>
<!-- BASES -->
<div><img class="headingimage" src="http://www.padthai.decorolux.com/wp-content/uploads/2018/03/ikonok-06.png"></div>
<table>
<tr>
<th width="15%">Bases</th>
<th width="20%"></th>
<th width="15%" style="font-weight:normal">Calories</th>
<th width="15%" style="font-weight:normal">Carbs</th>
<th width="15%" style="font-weight:normal">Fat</th>
<th width="15%" style="font-weight:normal">Protein</th>
<th width="5%" style="font-weight:normal">Add</th>
</tr>
<tr vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra.png'></td>
<td>Rice Noodle</td>
<td>517.2</td>
<td>76.1</td>
<td>14.4</td>
<td>20.8</td>
<td class="ingredients" data-calories="517.2" data-carbs="76.1" data-fat="14.4" data-proteins="20.8"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian lactosefree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra2.png'></td>
<td>Egg Noodle</td>
<td>510.5</td>
<td>66.1</td>
<td>14.1</td>
<td>29.8</td>
<td class="ingredients" data-calories="510.5" data-carbs="66.1" data-fat="14.1" data-proteins="29.8"><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra3.png'></td>
<td>Vermicelli</td>
<td>506.9</td>
<td>76.9</td>
<td>14.1</td>
<td>18.1</td>
<td class="ingredients" data-calories="506.9" data-carbs="76.9" data-fat="14.1" data-proteins="18.1" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian vegan lactosefree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra4.png'></td>
<td>Whole Grain Noodle</td>
<td>476.6</td>
<td>53.8</td>
<td>16.6</td>
<td>28.0</td>
<td class="ingredients" data-calories="476.6" data-carbs="53.8" data-fat="16.6" data-proteins="28" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian vegan glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra5.png'></td>
<td>White Rice</td>
<td>514.8</td>
<td>72.4</td>
<td>14.8</td>
<td>23.0</td>
<td class="ingredients" data-calories="514.8" data-carbs="72.4" data-fat="14.8" data-proteins="23" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra6.png'></td>
<td>Brown Rice</td>
<td>516.0</td>
<td>70.1</td>
<td>16.0</td>
<td>22.9</td>
<td class="ingredients" data-calories="516" data-carbs="70.1" data-fat="16" data-proteins="22.9" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
<tr class="ingredient" vegetarian vegan lactosefree glutenfree soyfree sugarfree noaddedsugar>
<td><img src='http://www.padthai.decorolux.com/wp-content/uploads/2018/03/base_toppings_extra7.png'></td>
<td>Vegetable Base</td>
<td>106.6</td>
<td>14.2</td>
<td>1.8</td>
<td>8.4</td>
<td class="ingredients" data-calories="106.6" data-carbs="14.2" data-fat="1.8" data-proteins="8.4" ><i class="fa fa-plus" style="font-size:20px;"></i></td>
</tr>
</table>
*奖金问题：
从iphone 6 plus（425px宽度）观看时，饮食或过敏原过滤器＆＃39;＆＃39;按钮出现方式巨大。我尝试设置@media max-width 440px来配置它，但似乎没有效果。如果我在桌面上的Chrome中查看它，@ media查询工作正常，但不能在移动设备上运行。感谢所有帮助！
答案 0 :(得分：0)
您的问题仅出现在CSS中，并且您在某些属性中提供了“！important”。 每次检查设计都会删除浏览器和移动设备中的所有历史记录或使用私人浏览器。