Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
476 views
in Technique[技术] by (71.8m points)

css - Media queries not behaving as expected on Android

I have 4 media queries. The 1st, 3rd and 4th work, but the 2nd one doesn't seem to activate.

Why is the 480x720 (second media query) defaulting to the first media query?

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

What is expected:

1st Media Query CSS Output 2nd Media Query CSS Output 3rd Media Query CSS Output 4th Media Query CSS Output

What is actually happening:

2nd Media Query fails 1st Media Query passes 3rd Media Query passes 4th media query passes

Why is the 480x720 (second media query) defaulting to the first media query?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I am a newbie on android and CSS.

I resolved the android not giving they real size with one line in the header of my index.html file:

<meta name="viewport" content="width=device-width" />

From then on, my CSS files did what I expected!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...