tablet não lê os media queries max-device-width e min-device-width

[Pedro Botelho 0]

ola amigos, estou recorrendo a este fórum pois estou com um problema o qual não estou conseguindo resolver e estou precisando de uma ajuda, mas não tenho a quem recorrer, por isso estou aqui, mas vamos ao problema:

 

estou desenvolvendo um projeto em uma empresa que é um livro eletrônico para ser lido no tablet. O fato é que eu inseri no arquivo css duas consultas de query para ajustar a página apenas para o tablet: uma com orientação retrato e outra com orientação paisagem.

O query com orientação retrato pegou direitinho no tablet com android mas o com orientação landscap o tablet não lê e eu não tenho a mínima ideia do porque.

 

já alterei a consulta e tirei as referencias min-device-width:768px e mas-device-width:1024px deixanto apenas orientation: landscape e dae funcionou, só que se eu fizer isso, o desktop é quem lê a query e altera o comportamento dos elementos.

 

Já tentei de tudo, variações do código, outras alternativas de código mas a coisa tah difícil... quando fica bom no tablet estraga no desktop e vice-versa, alguém pode me ajudar?

 

 

[Denis.Santos 7]

Não seria mais fácil ao invés de vc trabalhar com device, usar breakpoints dessa forma:

 

@media only screen and (min-width: 480px) and (max-width: 639px)

 

@media only screen and (min-width: 640px) and (max-width: 767px)

 

@media only screen and (min-width: 768px) and (max-width: 1023px)

 

@media only screen and (min-width: 1024px) and (max-width: 1279px)

 

@media only screen and (min-width: 1366px)

[William Bruno 1501]

vc já colocou a metatag viewport ?

[Pedro Botelho 0]

já coloquei a metatag viewport e o se eu usar somente os breakpoints, o tablet não está lendo o media query.

 

Já tentei retirar as outras informações e deixar apenas o orientation:landscape mas dae o desktop lê também e compila o css destinado para o mobile, mesmo que eu coloque um outro css com código para desktop na mesma resolução.

[andersonseifert 10]

Ola, eu uso essas meta tente usar :

 

 <meta name="viewport" content="width=device-width,initial-scale=1.0">
                <meta name="author" content="@toddmotto">

[botasleve 1]

 

Ola, eu uso essas meta tente usar :

 

 <meta name="viewport" content="width=device-width,initial-scale=1.0">
                <meta name="author" content="@toddmotto">

Caro, viewport serve pra ele.

Mas o author não tem a ver não é só autor mesmo....... rs