Magento 在移动设备上将样式显示为文本

Question

当尝试在移动设备上查看商店中的产品时，它会将产品的样式显示为文本，而不是应用它。 这只会在移动设备上显示为文本，并且在常规浏览器（计算机）上的工作方式应该如此。

在移动设备上显示如下：

<b>Intel Quad Core - I7 - 6700HQ</b> 
(2.6GHz - 3.5Ghz)) 6MB cache­ (SKYLAKE) <b>
<font color=“#4CC417”>45 Watt</b></font> Intel® HD 530

尝试在计算机浏览器中禁用 JavaScript 执行后，它也只会将文本显示为样式。

以下是计算机浏览器的示例： 以下是同一产品的设备版本示例：

在计算机上禁用 JavaScript 后，PC 版也将看起来像移动版。所以我最好的猜测是它与 JavaScript 问题有关。

我们已经解决这个问题好几天了，但找不到有效的解决方案。

提前致谢！

编辑：在我们希望找到问题的地方添加了部分代码

<script type="text/javascript">          
 var Brchecked="1";
 function Bmouseo(tyu){if(Brchecked!=tyu)     {
document.getElementById("hover-"+tyu).style.backgroundColor="#155565";}}
 function Bmouseo2(tyu){if(Brchecked!=tyu)    {     document.getElementById("hover-"+tyu).style.backgroundColor="transparent";     document.getElementById("hover-"+tyu).style.color="#ffffff";}}
</script>

编辑：执行此代码后，问题得到解决，文本按应有的方式显示。

changeSelection: function(selection){       
    parts = selection.id.split('-');
    if (this.config['options'][parts[2]].isMulti) {
        selected = new Array();
        if (selection.tagName == 'SELECT') {
            for (var i = 0; i < selection.options.length; i++) {
                if (selection.options[i].selected && selection.options[i].value != '') {                        
                    selected.push(selection.options[i].value);
                    //this.showName(parts[2], selection.options[i]);

                }
            }
        } else if (selection.tagName == 'INPUT') {
            selector = parts[0]+'-'+parts[1]+'-'+parts[2];
            selections = $$('.'+selector);
            for (var i = 0; i < selections.length; i++) {
                if (selections[i].checked && selections[i].value != '') {                       
                    selected.push(selections[i].value);
                    alert(selections[i].value);
                    //this.showName(parts[2], selections[i]);

                }
            }               
        }
        this.config.selected[parts[2]] = selected;
    } else {
        if (selection.value != '') {
            this.config.selected[parts[2]] = new Array(selection.value);

        } else {
            this.config.selected[parts[2]] = new Array();
        }
        this.populateQty(parts[2], selection.value);
        //this.showName(parts[2], selection);           
    }
    this.changeTitlePriceLabel(parts[2], selection.value);
    this.changeTagActive(parts[2], selection.value);
    //alert(selection.value);
    this.showName();
    this.reloadPrice();

}

Answer 1

确保在页面的标题部分中存在以下内容并按此特定顺序

<meta charset="UTF-8">
<title>Page Header</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="style.css">

使用结果创建一个表格并在 CSS 中为表格添加悬停效果

tr:hover td {
color: #000;
background: #FFF8DC;
}