Android中的媒体查询

Question

I would like to use different css files for different android phone device widths. We have one Samsung Galaxy Mini (device-width: 320px) and one Samsung Galaxy Note 4 (device-width: 360px) for testing. When we use the following code, no css file is loaded:

<link href="css/iss_320_530_01_00.css" rel="stylesheet" type="text/css" media="only screen and (device-width: 320px)" />
<link href="css/iss_360_640_01_00.css" rel="stylesheet" type="text/css" media="only screen and (device-width: 360px)" /> 

What could be the solution?

Answer 1

I found the solution, but now we have another problem: My scrollView's android:layout_height was set to WRAP_CONTENT . According to the following doc , it should be set to MATCH_PARENT .
I quote from there:

"It is recommended to set the WebView layout height to a fixed value or to MATCH_PARENT instead of using WRAP_CONTENT. When using MATCH_PARENT for the height none of the WebView's parents should use a WRAP_CONTENT layout height since that could result in incorrect sizing of the views."

I also changed the media queries as follows:

<link href="css/iss_320_530_01_00.css" rel="stylesheet" type="text/css" media="screen and device-width: 320px" />
<link href="css/iss_360_640_01_00.css" rel="stylesheet" type="text/css" media="screen and device-width: 360px" /> Now, css files are loaded for Samsung Galaxy S3 Mini, but not for Samsung Note 4.