-1

In a Web Page I want a button should hide in tablet view but it should show in desktop OR laptop view..

I used media Query but what if size are same?

The Problem is I have same size of Laptop and Tablet now how can i do it.....

Ravi Sah
  • 47
  • 7
  • https://stackoverflow.com/questions/15566168/what-is-the-perfect-way-to-detect-a-tablet Have a look here. Seems to be the same question. – Grégory L Jan 04 '19 at 08:51
  • https://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript – Lalji Tadhani Jan 04 '19 at 08:53

4 Answers4

1

You can use height & width like

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

Or Your tablet is retina display you can write this way

@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/

Lalji Tadhani
  • 12,597
  • 2
  • 19
  • 36
0

One way to do it is with PHP. Look at the HTTP_USER_AGENT and if it is a tablet, you can not display the HTML.

Jaapaap
  • 201
  • 1
  • 5
  • A interviewer asked this question to my friend and said we can do this by css but how he did not tell.... – Ravi Sah Jan 04 '19 at 08:53
0

You can detect the operating system in javascript by using window.ui.os and then call a javascript function to hide the button.

Rahul Kant
  • 33
  • 8
0

please use this media query I hope its working into your code...

 
  
   
@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;
    }
    } 
<input type="button" value="button1" class="btn" />
Bhavdip
  • 19
  • 1
  • 8