android - 如何为混合应用程序使用媒体查询

我想在页面中的每台设备上显示我的所有图片，而无需向下滚动以查看我的混合应用程序。

我学到的是，由于存在不同的屏幕尺寸，我应该使用媒体查询。

因此，我使用的是 iPhone 4，例如:

@media only screen

and (min-width : 320px)
and (min-height : 480px) 
and (max-width : 320px)
and (max-height : 480px) 
{ 
Content
}

因此，如果是 Iphone 5，请以我指定的尺寸显示图片。

由于有很多手机使用相同的媒体查询宽度和高度，我想我将为我在此处找到的所有 android 和 ios 设备执行此操作:http://www.canbike.org/CSSpixels/

我走对了吗？

提前谢谢你

---

Best Answer-推荐答案

Read This First (1)

---

然后阅读此媒体

/* For lower than 700px resolutions */
@media (max-width: 700px) { ... }
/* Same as last but with the device orientation on land scape */
@media (max-width: 700px) and (orientation: landscape) { ... }
/* Including width and orientation you can add a media type clause,
   in this case 'tv' */
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
/* for low resolution display with background-image */
.image {
    background-image: url(/path/to/my/image.png);
    background-size: 200px 300px;
    height: 300px;
    width: 200px;
}
/* for high resolution (Retina) display with background-image */
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    -repeat;
        background-size: 200px 400px;
    /* rest of your styles... */
    }
}

---

了解Developing Mobile Web Apps: When, Why, and How

---

链接中的一些有用数据(1)

棘手的部分

但是，有两个棘手的地方:设备宽度媒体查询和 <meta name="viewport"width="device-width"> 标签。两者都适用于设备像素，而不适用于 CSS 像素，因为它们报告的是网页的上下文，而不是其内部 CSS 工作原理。

媒体查询

设备宽度媒体查询以设备像素为单位测量设备的宽度。 width 媒体查询以 CSS 像素为单位测量页面的总宽度，原因我稍后会解释，在 iPhone 上至少为 980 像素。

div.sidebar {
    width: 300px;
}

@media all and (max-device-width: 320px) {
    // styles assigned when device width is smaller than 320px;
    div.sidebar {
        width: 100px;
    }

}

现在侧边栏的宽度为 300 CSS 像素，除非设备宽度为 320 设备像素或更小，在这种情况下，它变为 100 CSS 像素宽。 (你还跟着？这很复杂。)

顺便说一句，理论上您可以使用媒体查询来以厘米或英寸为单位查询设备屏幕(@media all and (max-device-width: 9cm))。不幸的是，即使是 iPhone 也完全不支持它似乎很糟糕。这里的问题是英寸等物理单位通常转换为(CSS)像素；因此 width: 1in 在我迄今为止测试的所有浏览器上都等于 96 像素(这还不少)。所以这些媒体查询是不可靠的。

<meta> 标签

一般来说更有用。这个标签最初是 Apple 专有的，但同时被更多的移动浏览器支持，实际上使布局视口(viewport)完全适合设备。

现在什么是布局视口(viewport)？它是浏览器用来计算具有百分比宽度的元素尺寸的区域(以 CSS 像素为单位)，例如 div.sidebar {width: 20%}。它通常比设备屏幕大很多:iPhone 为 980px，Opera 为 850px，Android 为 800，等等。

如果添加 <meta name="viewport"width="device-width">，则此布局视口(viewport)的宽度会被限制为设备宽度(以设备像素为单位)；其中 320 个在 iPhone 的情况下。

如果您的页面足够窄以适合屏幕，这很重要。在没有任何 CSS 宽度声明和 <meta> 标记的情况下获取此页面。它延伸到布局视口(viewport)的整个可用宽度。

这可能不是你想要的。您希望将文本很好地适应屏幕。这就是 <meta name="viewport"width="device-width"> 的任务。添加后，布局视口(viewport)会缩小(在 iPhone 的情况下为 320 像素)，并且文本适合。

关于android - 如何为混合应用程序使用媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33339082/