0

.display{display: block}
<div class="display-mobile">
    <div>
        <a href="#">Boton desktop 1</a>
    </div>
    <div>
        <a href="#">Boton desktop 2</a>
    </div>
</div>

<div class="display-mobile">
    <div>
        <a href="#">Boton mobile 1</a>
    </div>
    <div>
        <a href="#">Boton mobile 2</a>
    </div>
</div>

Basandome en el siguiente codigo me gustaria saber como puediera hacer que en Windows, MacOs y Linux se mostrara unicamente mi div con la clase display-desktop, y en iOS y android se muestre unicamente mi div con la clase display-mobile

2
  • Bienvenida a Stack Overflow en español te invito a leer Cómo preguntar y de paso hacer el recorrido de bienvenida. Respondiendo a tu pregunta, la única forma de detectar el sistema operativo es con javascript, sin embargo tu no necesitas eso, si no algo llamado Responsive Design que se hace con CSS, investiga sobre. Commented el 7 abr. 2021 a las 19:35
  • No depende del OS sino del navegador. Por favor, especifica qué es lo que ves diferente o qué problema tienes con los estilos actuales. Hay algunos objetos que cambian de uno a otro (los comboboxes) peeero en general, el OS no es el culpable
    – Alfabravo
    Commented el 7 abr. 2021 a las 20:29

3 respuestas 3

3

Si lo que quieres es mostrar esos div dependiendo del sistema operativo, tienes al alcance una funcionalidad propia del navegador llamada navigator.appVersion. Esto te mostrará información del tipo de navegador que el usuario está usando y por supuesto, el sistema operativo. Entonces, si haces algo como esto:

let OSName="Android";

if (navigator.appVersion.indexOf("Win") !=-1 ) OSName="Windows";
if (navigator.appVersion.indexOf("Mac") !=-1 ) OSName="MacOS";
if (navigator.appVersion.indexOf("X11") !=-1 ) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux") !=-1 ) OSName="Linux";

switch(OSName) {
  case "Windows":
    document.body.style.backgroundColor = "red";
    $('#point').html(`
      <div style="height: 50px; width: 50px; background-color: #F2F110;"></div>
    `);
    break;
  case "Linux":
    document.body.style.backgroundColor = "blue";
    $('#point').html(`
      <div style="height: 50px; width: 50px; background-color: #FFF100;"></div>
    `);
    break;
  case "MacOs":
    document.body.style.backgroundColor = "yellow";
    $('#point').html(`
      <div style="height: 50px; width: 50px; background-color: #FFF110;"></div>
    `);
    break;
  case "UNIX":
    document.body.style.backgroundColor = "#234567";
    $('#point').html(`
      <div style="height: 50px; width: 50px; background-color: #FFF001;"></div>
    `);
    break;
  default:
    document.body.style.backgroundColor = "#008910";
    $('#point').html(`
      <div style="height: 50px; width: 50px; background-color: #FFF101;"></div>
    `);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="point" style="height: 200px; width: 200px; background-color: #000;"></div>

Facilmente lo puedes aplicar para que muestre los divs que quieras.

1

Solución por navegador:

Esto no se puede hacer con CSS, tienes que utilizar Javascript para recuperar la información del navegador con window.navigator y más específico, window.navigator.userAgent.

Como ejemplo, podrías hacer algo como esto:

const browser = window.navigator.userAgent;
const isSafari = browser.indexOf('Safari') > 0 ? true : false;
if(isSafari){
  // hacer algo en safari suponiendo que tienes una clase
  // .d-none{display: none;}
  document.querySelectorAll('.display-mobile').forEach(el => {
    el.classList.add('d-none');
  })
} 

Solución por device-size Media Query:

Lo puedes configurar con media query:

/* lógica mobile-first */
.display-mobile{display: block;}
.display-desktop{display: none;}

@media screen and (min-width: 640px){
  .display-mobile{display: none;}
  .display-desktop{display: block;}
}

Si deseas saber más:
https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries

2
  • Hola muchas gracias! pero me gustaria no usar media querys ya que no me gustaria depender mucho de la resolucion si no del sistema operativo Commented el 7 abr. 2021 a las 19:36
  • Entiendo, edito respuesta
    – Devandmus
    Commented el 7 abr. 2021 a las 19:41
1

Lo resolví de la siguiente manera

<html>
 <body>
<div id="display-desktop">
    <div>
        <a href="#">Boton desktop 1</a>
    </div>
    <div>
        <a href="#">Boton desktop 2</a>
    </div>
</div>

<div id="display-mobile">
    <div>
        <a href="#">Boton mobile 1</a>
    </div>
    <div>
        <a href="#">Boton mobile 2</a>
    </div>
</div>
 </body>   
</html>



<script>
    function retornarSO(){
      if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) {
        document.getElementById("display-desktop").style.display = "none";
      }else{
        document.getElementById("display-mobile").style.display = "none";
      }
    }
    retornarSO();

</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.