我有相同尺寸的笔记本电脑和平板电脑，但我想隐藏平板电脑上的按钮而不是笔记本电脑......我该怎么做？答案

【问题标题】：I have same size of Laptop and Tablet, but I want to hide a Button on Tablet not in Laptop..... How Can I do this?我有相同尺寸的笔记本电脑和平板电脑，但我想隐藏平板电脑上的按钮而不是笔记本电脑......我该怎么做？
【发布时间】：2019-01-04 08:44:13
【问题描述】：

在网页中，我希望按钮应隐藏在平板电脑视图中，但应显示在台式机或笔记本电脑视图中..

我使用了媒体查询，但如果大小相同怎么办？

问题是我现在有相同尺寸的笔记本电脑和平板电脑我该怎么做.....

【问题讨论】：

stackoverflow.com/questions/15566168/… 看看这里。似乎是同一个问题。
stackoverflow.com/questions/11219582/…

标签： jquery html css

【解决方案1】：

你可以使用height & width 喜欢

@media only screen and (max-width: 1024px) and (max-height:768px) {
   .your-class{display:none}
}

或者你的平板电脑是视网膜显示器，你可以这样写

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

http://stephen.io/mediaqueries/

【讨论】：

【解决方案2】：

一种方法是使用 PHP。看一下HTTP_USER_AGENT，如果是平板，就不能显示HTML。

【讨论】：

一位面试官问我朋友这个问题，说我们可以通过css做到这一点，但他没有告诉....

【解决方案3】：

您可以使用window.ui.os 在javascript 中检测操作系统然后调用一个javascript函数来隐藏按钮。

【讨论】：

【解决方案4】：

请使用此媒体查询，我希望它可以用于您的代码...

@media screen and (min-width: 991px) {
    .btn {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
    }
  } 
 
  @media screen and (max-width: 600px) {
    .btn {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
    }
    }

&lt;input type="button" value="button1" class="btn" /&gt;

【讨论】：