Question

页面上有两个向下箭头，使用以下代码生成：

<div class="content" style="padding-top:0px;">
    <div class="right sld_cont">
        <img src="http://coldcallwithconfidence.com/wp-content/uploads/2015/01/Arrow_comic_right_gray_T.png">
    </div>
    <div class="left sld_cont">
        <img src="http://coldcallwithconfidence.com/wp-content/uploads/2015/01/Arrow_comic_right_gray_T1.png">
    </div>
</div>

我想隐藏其中一个箭头，因为它在移动视图中看起来很重复。

任何人都可以解释我可能会这样做吗？

Answer 1

我建议你在隐藏那些元素的视口上隐藏右箭头，而不是将它们隐藏在移动设备上。

根据您的问题，上一个答案是正确的，但我认为这可能是一个更合适的解决方案。

@media only screen and (max-width: 679px) {
   .right.sld_cont {
   display: none;
   }
}

这意味着对于679px或更小的任何视口，将隐藏右箭头。

Answer 2

看一下MobileDetect.js，然后你可以将它用作PHP if语句，只有在它不是移动设备时才显示它。

if(!$detect->isMobile()) {
    # desktop code
}

编辑：

<?php if(!$detect->isMobile()) { ?>
<div class="content" style="padding-top:0px;">
    <div class="right sld_cont">
    <img src="http://coldcallwithconfidence.com/wp-content/uploads/2015/01/Arrow_comic_right_gray_T.png">
    </div>
    <div class="left sld_cont">
    <img src="http://coldcallwithconfidence.com/wp-content/uploads/2015/01/Arrow_comic_right_gray_T1.png">
    </div>
</div>
<?php } ?>

如何在移动设备上隐藏div

2 个答案: