Html 中 Android 平板电脑和 Phone 的不同图像宽度

Question

我有一个在平板电脑和 phone 上运行的 android 应用程序。我的内容是从 assets 文件夹中加载 html 个文件。我的问题是我想要在平板电脑和 phone.

上使用不同的图像尺寸

这是 phone 上图片的代码。

<img src="check_yes_tick_parent.png" width="8%"/>

但是这在平板电脑上太宽了，理想情况下我希望宽度为 3%。

我知道我可以为每个文件制作两个 html 文件。即一个用于 phone，一个用于平板电脑。但是有没有更简单的方法呢？

Answer 1

您可以为此使用 css 和媒体查询，然后您不需要 2 个或更多 html 文件。

例如：

在html：

<div id="image"></div>

在css：

@media screen and (min-width: 1024px) {
    width: 100px;
    height: 100px;
    background-image: url(check_yes_tick_parent.png);
}
@media screen and (width: 768px) and (height: 1004px) {
    width: 50px;
    height: 50px;
    background-image: url(check_yes_tick_parent_for_pad.png);
}

可以参考CSS3 @media Rule

Html 中 Android 平板电脑和 Phone 的不同图像宽度

Different Image widths in Html for Android Tablet and Phone

html

android

image

android-assets