Para criar um código que permita o conteúdo ser mostrado apenas em dispositivos móveis e não em computadores, você pode utilizar tecnologias web, como HTML, CSS e JavaScript, para criar uma página responsiva que exiba ou oculte determinados elementos com base no tipo de dispositivo.
Várias abordagens podem ser usadas, mas aqui está uma solução simples usando a biblioteca JavaScript “Detect.js” para identificar o tipo de dispositivo e, em seguida, ajustar o conteúdo de acordo. Primeiro, você precisará incluir o arquivo “detect.min.js” na sua página. Você pode baixá-lo em https://github.com/darcyclarke/Detect.js/ ou usar uma CDN, se disponível.
Aqui está um exemplo de como você pode fazer isso:
<!DOCTYPE html>
<html>
<head>
<title>Conteúdo somente para mobile</title>
<!-- Inclua a biblioteca Detect.js -->
<script src="caminho/para/detect.min.js"></script>
</head>
<body>
<!-- Conteúdo que será exibido somente em dispositivos móveis -->
<div id="mobile-content">
<h1>Bem-vindo ao nosso site mobile!</h1>
<!-- Coloque aqui o conteúdo que você deseja exibir somente em mobile -->
</div>
<!-- Conteúdo que será exibido somente em computadores -->
<div id="desktop-content">
<h1>Desculpe, este conteúdo não está disponível em computadores.</h1>
<!-- Coloque aqui o conteúdo que você deseja exibir somente em desktops -->
</div>
<script>
// Verifica se o dispositivo é um celular ou tablet
if (detectMobile()) {
// Se for mobile, mostra o conteúdo para mobile e esconde o conteúdo para desktop
document.getElementById('mobile-content').style.display = 'block';
document.getElementById('desktop-content').style.display = 'none';
} else {
// Se for desktop, mostra o conteúdo para desktop e esconde o conteúdo para mobile
document.getElementById('mobile-content').style.display = 'none';
document.getElementById('desktop-content').style.display = 'block';
}
// Função para detectar se é um dispositivo mobile
function detectMobile() {
return (typeof window.orientation !== 'undefined') || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
</script>
</body>
</html>O código acima verifica se o dispositivo é um celular ou tablet usando a função detectMobile(), que usa algumas propriedades do objeto window e do objeto navigator.userAgent. Em seguida, ele ajusta a visibilidade dos elementos com base no resultado dessa detecção.
Lembre-se de que é possível fazer a detecção de dispositivos usando outras bibliotecas ou técnicas, e você pode ajustar o comportamento conforme necessário para atender às suas necessidades específicas. Contudo, é importante ressaltar que esse método não é totalmente à prova de falhas, pois a detecção de dispositivos pode ser enganada em alguns casos raros.