O userAgent no HTML

[Frank K Hosaka]

O primeiro teste deu certo.

astudy.html

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<input type=submit onclick=recdiv.innerHTML=navigator.userAgent value=userAgent>
<div id=recdiv></div>

O segundo teste é pura gambiarra. Eu não consegui executar os comandos do JavaScript. Coloquei os comandos dentro de uma função e depois chamei a função depois da tag <div id=recdiv>.

astudy.html (versão 2.0)

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<script>
function inicio() {
	ehdesktop=navigator.userAgent.match(/(Windows)/i)
	agente="movel"
	if (ehdesktop) {agente="desktop"}
	recdiv.innerHTML="Você está com o dispositivo "+agente}
</script>

<div id=recdiv></div>
<script>inicio()</script>

Finalmente, nessa última versão eu trago a minha primeira experiência com o estilo, que muda de acordo com o dispositivo.

astudy.html (versão 3.0)

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<style>
.movel {color:blue}
.desktop {color:red}
</style>
<script>
function inicio() {
	ehdesktop=navigator.userAgent.match(/(Windows)/i)
	agente="movel"
	if (ehdesktop) {
		agente="desktop"
		recdiv.classList.remove('movel')
		recdiv.classList.add('desktop')}
	recdiv.innerHTML="Você está com o dispositivo "+agente}
</script>

<div id=recdiv class=movel></div>
<script>inicio()</script>

 

Editado Junho 25, 2022 por Frank K Hosaka