如何为小屏幕的 android 设备实现媒体查询？答案

【问题标题】：How to implement Media Queries for android devices with small screens?如何为小屏幕的 android 设备实现媒体查询？
【发布时间】：2013-06-08 05:15:31
【问题描述】：

我正在做一个电话间隙项目。我已经实现了滑动视图功能。我使用了图像作为文本的背景。 图片大小约为 304 * 250。

它在 320 * 480 的屏幕尺寸和 720 * 1280 的屏幕尺寸下完美运行。

现在，当我想在 240 * 320 和 480 * 800 的屏幕尺寸中检查相同的情况时？ 既看不到背景图像，也看不到数据值。

采取的补救措施：

我想用盒子阴影代替图像。我实现了它，并在 320 * 480 的屏幕尺寸下进行了测试，非常完美。

我想在 240 * 320 和 480 * 800 的屏幕尺寸下使用 Media Query

进行测试

我从here 引用并尝试实现它，但我没有成功。

我的普通css

.container
{
    width:80%; height:auto; margin-left:10px; margin-right:10px; background-color:#CCCCCC; text-align:justify; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; min-height:250px;
}

我的媒体查询 CSS

@media only screen and (max-device-width: 240px) 
{
    .container
    {
       width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
    }
}

我已经通过以下方式调用了 CSS

<link rel="stylesheet" type="text/css" href="css/common_set.css" />

问题： 它没有实现。我看不到盒子。它只是一个空屏幕。

我的实现有什么错误吗？

【问题讨论】：

标签： android html css cordova media-queries

【解决方案1】：

我不知道你是否在你的应用程序中这样做了，但这里你的 CSS 代码末尾有两个分号

@media only screen and (max-device-width: 240px) 
{
   .container
   {
      width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; **;**
   }
}

【讨论】：

是的，我在我的应用程序中犯了那个错误。但是，即使在纠正之后。输出视图没有变化
任何其他建议...请
尝试使用更大的最大设备宽度，例如最大设备宽度：300px
先生，还有其他建议吗？

【解决方案2】：

首先在你的 html 文件中添加这个元标记。

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

【讨论】：