Jump to content

CSS compatível com desktop, mobile e tablets


acao
 Share

Recommended Posts

boas

o meu css suporta a navegação de desktop e mobile e tablet,

mas acontece que o mobile (nokia asha 306) entra na secção de tablet em vez de no mobile largura 240.

tenho este css:

@media only screen and (min-width : 10px) and (max-width : 319px){}
@media only screen and (min-width : 320px) and (max-width : 532px) {}
@media only screen and (min-width : 533px) and (max-width : 767px) {}
@media only screen and (min-width : 768px) and (max-width : 992px) {}

e no head

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

o que acham que está acontecer?

cumps

acao

Link to comment
Share on other sites

A não ser que estejas a ver em landscape, não estou a ver razão para isso acontecer.

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Link to comment
Share on other sites

boas

obrigado pelo retorno,

A não ser que estejas a ver em landscape, não estou a ver razão para isso acontecer.

pois não sei o que acontece, apanha o mesmo css das duas maneiras, mas noutros telemóveis com o mesmo tamanho de ecrã funciona bem,

o tamanho do ecrã é de 240 x 400, portanto ele deveria apanhar o 1º ou 2º css e não ele entra no 3º ou 4º. ou até talvez no desktop, porque as imagens ficam muito grandes.

já pensei em adicionar isto ao css:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) { }

regra foca em dispositivos com alta resolução como os Retina Display e Android modernos.

mas não sei que regras ei-de colocar, se são todos os tamanhos ou não. ou qual o tamanho correto.

fonte:http://blog.caelum.com.br/flexibilidade-em-paginas-para-dispositivos-moveis-com-media-queries/

cumps

acao

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.