隐藏移动设备的图像

Question

我正在尝试在我的网站上隐藏移动设备的特定图像。我已经尝试了各种 html 和 css 代码，但无法让它工作。这可能与我的 div 类和 Id 标签有关。

请问有人可以尝试让它为我工作吗？

HTML：

<section id="left-sidebar">
 <div class="logo">
    <a href="#intro" class="link-scroll">
      <img src="assets/images/other_images/logo.png" alt="description of image">
      <img src="assets/images/other_images/nav.png" class="nav">
    </a>
 </div>

CSS：

@media (max-width: 600px) {
    #left-sidebar .logo .nav  {
        display:none;
    }
}

Answer 1

你必须使用@Media screen：

屏幕 用于电脑屏幕、平板电脑、智能手机等。

将其结合起来pixel-ratio以满足您的需求。在这里查看更多示例

例如（对于三星 Galaxy S3）：

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
{
    // insert here your custom styles
    #left-sidebar .logo .nav  {
       display:none;
    }
}